nav bar

frontend/components/navigation.tsx

@@ -10,18 +10,13 @@ export function Navigation() {
   const pathname = usePathname()
 
   return (
-    <nav className="border-b bg-card">
+    <aside className="h-screen w-56 bg-card border-r flex flex-col items-center py-8 gap-4">
-      <div className="container mx-auto px-4">
+      <nav className="flex flex-col gap-2 w-full px-4">
-        <div className="flex h-16 items-center justify-between">
-          <div className="flex items-center space-x-8">
-            <Link href="/" className="text-2xl font-bold text-primary">
-              GenDB
-            </Link>
-            <div className="flex items-center space-x-4">
         <Button
           variant={pathname === "/" ? "default" : "ghost"}
           size="sm"
           asChild
+          className="justify-start w-full"
         >
           <Link href="/">
             <Search className="h-4 w-4 mr-2" />
@@ -32,17 +27,14 @@ export function Navigation() {
           variant={pathname === "/admin" ? "default" : "ghost"}
           size="sm"
           asChild
+          className="justify-start w-full"
         >
           <Link href="/admin">
             <Settings className="h-4 w-4 mr-2" />
             Admin
           </Link>
         </Button>
-            </div>
-          </div>
-          <ModeToggle />
-        </div>
-      </div>
       </nav>
+    </aside>
   )
 }

frontend/src/app/layout.tsx

@@ -3,6 +3,7 @@ import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
 import { ThemeProvider } from "@/components/theme-provider";
 import { Navigation } from "@/components/navigation";
+import { ModeToggle } from "@/components/mode-toggle";
 
 const geistSans = Geist({
   variable: "--font-geist-sans",
@@ -35,12 +36,20 @@ export default function RootLayout({
           enableSystem
           disableTransitionOnChange
         >
-          <div className="min-h-screen bg-background">
+          <div className="min-h-screen bg-background flex">
             <Navigation />
-            <main className="container mx-auto px-4 py-8">
+            <div className="flex-1 flex flex-col min-h-screen">
+              <header className="w-full py-6 border-b flex items-center justify-center relative">
+                <h1 className="text-3xl font-bold text-primary mx-auto">GenDB</h1>
+                <div className="absolute right-8 top-1/2 -translate-y-1/2">
+                  <ModeToggle />
+                </div>
+              </header>
+              <main className="flex-1 container mx-auto px-4 py-8 flex flex-col items-center justify-center">
                 {children}
               </main>
             </div>
+          </div>
         </ThemeProvider>
       </body>
     </html>

frontend/src/app/page.tsx

@@ -63,7 +63,7 @@ export default function SearchPage() {
         <p className="text-muted-foreground">Search through your indexed documents</p>
       </div>
 
-      <Card>
+      <Card className="max-w-2xl w-full mx-auto">
         <CardHeader>
           <CardTitle className="flex items-center gap-2">
             <Search className="h-5 w-5" />
@@ -104,10 +104,9 @@ export default function SearchPage() {
               )}
             </Button>
           </form>
-        </CardContent>
+          {/* Always render the results area, but show it empty if no search has been performed */}
-      </Card>
+          <div className="mt-8">
-
+            {searchPerformed ? (
-      {searchPerformed && (
               <div className="space-y-4">
                 <div className="flex items-center justify-between">
                   <h2 className="text-xl font-semibold">Search Results</h2>
@@ -115,7 +114,6 @@ export default function SearchPage() {
                     {results.length} result{results.length !== 1 ? 's' : ''} found
                   </span>
                 </div>
-
                 {results.length === 0 ? (
                   <Card>
                     <CardContent className="pt-6">
@@ -154,7 +152,12 @@ export default function SearchPage() {
                   </div>
                 )}
               </div>
+            ) : (
+              <div style={{ minHeight: 120 }} />
             )}
           </div>
+        </CardContent>
+      </Card>
+    </div>
   )
 }