AeThex-Corporation/aethex-forge
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Improve DocsLayout styling and consistency

Browse source 
cgen-4eb1cd1c551f492f8b6a35ca5d8cd382
This commit is contained in:
Builder.io 2025-11-05 21:43:36 +00:00
parent d40b747966
commit 3af4b01164
1 changed files with 26 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

49
client/pages/DocsLayout.tsx
View file

@ -116,38 +116,41 @@ export default function DocsLayout() {
<div className="container mx-auto px-4 py-8"> <div className="container mx-auto px-4 py-8">
{/* Header */} {/* Header */}
<div className="mb-8"> <div className="mb-8">
<div className="flex items-center justify-between mb-4"> <div className="flex items-center justify-between mb-6">
<div> <div>
<h1 className="text-3xl font-bold text-white mb-2"> <h1 className="text-4xl font-bold text-white mb-2">
AeThex Documentation AeThex Documentation
</h1> </h1>
<p className="text-gray-300"> <p className="text-gray-300 text-lg">
Comprehensive guides, tutorials, and API references Comprehensive guides, tutorials, and API references
</p> </p>
</div> </div>
<button <button
onClick={() => setSidebarOpen(!sidebarOpen)} onClick={() => setSidebarOpen(!sidebarOpen)}
className="lg:hidden p-2 text-white bg-slate-800 rounded-md" className="lg:hidden p-2 text-white bg-slate-800 hover:bg-slate-700 rounded-lg transition-colors"
> >
{sidebarOpen ? ( {sidebarOpen ? (
<X className="h-5 w-5" /> <X className="h-6 w-6" />
) : ( ) : (
<Menu className="h-5 w-5" /> <Menu className="h-6 w-6" />
)} )}
</button> </button>
</div> </div>
{/* Breadcrumb */} {/* Breadcrumb */}
{breadcrumbs.length > 0 && ( {breadcrumbs.length > 0 && (
<nav className="flex items-center space-x-2 text-sm text-gray-400 mb-4"> <nav className="flex items-center space-x-2 text-sm text-gray-400 mb-6">
<Link to="/docs" className="hover:text-white transition-colors"> <Link
to="/docs"
className="hover:text-white transition-colors font-medium"
>
Docs Docs
</Link> </Link>
{breadcrumbs.map((crumb, index) => ( {breadcrumbs.map((crumb, index) => (
<div key={index} className="flex items-center space-x-2"> <div key={index} className="flex items-center space-x-2">
<ChevronRight className="h-4 w-4" /> <ChevronRight className="h-4 w-4 text-gray-600" />
{crumb.isLast ? ( {crumb.isLast ? (
<span className="text-white">{crumb.name}</span> <span className="text-white font-medium">{crumb.name}</span>
) : ( ) : (
<Link <Link
to={crumb.href} to={crumb.href}
@ -162,24 +165,24 @@ export default function DocsLayout() {
)} )}
{/* Search */} {/* Search */}
<div className="relative max-w-md"> <div className="relative max-w-sm">
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-4 w-4" /> <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-5 w-5" />
<Input <Input
placeholder="Search documentation..." placeholder="Search documentation..."
value={searchQuery} value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)} onChange={(e) => setSearchQuery(e.target.value)}
className="pl-10 bg-slate-800/50 border-slate-600 text-white" className="pl-10 bg-slate-800/50 border-slate-600 text-white placeholder-gray-500 focus:border-purple-500 focus:ring-1 focus:ring-purple-500/50"
/> />
</div> </div>
</div> </div>
<div className="flex flex-col lg:flex-row gap-8"> <div className="flex flex-col lg:flex-row gap-8">
{/* Sidebar */} {/* Sidebar */}
<div <aside
className={`w-full lg:w-64 ${sidebarOpen ? "block" : "hidden lg:block"}`} className={`w-full lg:w-64 ${sidebarOpen ? "block" : "hidden lg:block"}`}
> >
<div className="bg-slate-800/50 border border-slate-700 rounded-lg p-4 sticky top-4"> <div className="bg-slate-800/30 border border-slate-700 rounded-xl p-4 sticky top-24 backdrop-blur-sm">
<nav className="space-y-2"> <nav className="space-y-1">
{navigation.map((item) => { {navigation.map((item) => {
const Icon = item.icon; const Icon = item.icon;
const active = isActive(item.href, item.exact); const active = isActive(item.href, item.exact);
@ -188,19 +191,19 @@ export default function DocsLayout() {
<Link <Link
key={item.name} key={item.name}
to={item.href} to={item.href}
className={`flex items-center justify-between px-3 py-2 rounded-md text-sm transition-all ${ className={`flex items-center justify-between px-3 py-2.5 rounded-lg text-sm font-medium transition-all ${
active active
? "bg-purple-600 text-white" ? "bg-purple-600/80 text-white shadow-lg shadow-purple-500/20"
: "text-gray-300 hover:bg-slate-700/50 hover:text-white" : "text-gray-300 hover:bg-slate-700/50 hover:text-white"
}`} }`}
onClick={() => setSidebarOpen(false)} onClick={() => setSidebarOpen(false)}
> >
<div className="flex items-center space-x-3"> <div className="flex items-center space-x-3">
<Icon className="h-4 w-4" /> <Icon className="h-5 w-5" />
<span>{item.name}</span> <span>{item.name}</span>
</div> </div>
{item.badge && ( {item.badge && (
<Badge className="bg-green-600 text-white text-xs"> <Badge className="bg-green-600 text-white text-xs px-2 py-1">
{item.badge} {item.badge}
</Badge> </Badge>
)} )}
@ -209,12 +212,12 @@ export default function DocsLayout() {
})} })}
</nav> </nav>
</div> </div>
</div> </aside>
{/* Content */} {/* Content */}
<div className="flex-1"> <main className="flex-1 min-w-0">
<Outlet /> <Outlet />
</div> </main>
</div> </div>
</div> </div>
</div> </div>