From 82875856b57b195e9030eed09562aadbdcd6dacd Mon Sep 17 00:00:00 2001
From: "estevez.sebastian@gmail.com" <estevezsebastian@gmail.com>
Date: Fri, 11 Jul 2025 01:07:13 -0400
Subject: [PATCH] nav bar

---
 frontend/components/navigation.tsx |  60 ++++++++---------
 frontend/src/app/layout.tsx        |  17 +++--
 frontend/src/app/page.tsx          | 103 +++++++++++++++--------------
 3 files changed, 92 insertions(+), 88 deletions(-)

diff --git a/frontend/components/navigation.tsx b/frontend/components/navigation.tsx
index 8ee035fb..5c529bbe 100644
--- a/frontend/components/navigation.tsx
+++ b/frontend/components/navigation.tsx
@@ -10,39 +10,31 @@ export function Navigation() {
   const pathname = usePathname()
 
   return (
-    <nav className="border-b bg-card">
-      <div className="container mx-auto 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
-              >
-                <Link href="/">
-                  <Search className="h-4 w-4 mr-2" />
-                  Search
-                </Link>
-              </Button>
-              <Button
-                variant={pathname === "/admin" ? "default" : "ghost"}
-                size="sm"
-                asChild
-              >
-                <Link href="/admin">
-                  <Settings className="h-4 w-4 mr-2" />
-                  Admin
-                </Link>
-              </Button>
-            </div>
-          </div>
-          <ModeToggle />
-        </div>
-      </div>
-    </nav>
+    <aside className="h-screen w-56 bg-card border-r flex flex-col items-center py-8 gap-4">
+      <nav className="flex flex-col gap-2 w-full px-4">
+        <Button
+          variant={pathname === "/" ? "default" : "ghost"}
+          size="sm"
+          asChild
+          className="justify-start w-full"
+        >
+          <Link href="/">
+            <Search className="h-4 w-4 mr-2" />
+            Search
+          </Link>
+        </Button>
+        <Button
+          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>
+      </nav>
+    </aside>
   )
 }
\ No newline at end of file
diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
index 345e8cf2..227b3385 100644
--- a/frontend/src/app/layout.tsx
+++ b/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,11 +36,19 @@ 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">
-              {children}
-            </main>
+            <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>
diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
index 077a7518..2b2e487b 100644
--- a/frontend/src/app/page.tsx
+++ b/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,57 +104,60 @@ export default function SearchPage() {
               )}
             </Button>
           </form>
+          {/* Always render the results area, but show it empty if no search has been performed */}
+          <div className="mt-8">
+            {searchPerformed ? (
+              <div className="space-y-4">
+                <div className="flex items-center justify-between">
+                  <h2 className="text-xl font-semibold">Search Results</h2>
+                  <span className="text-sm text-muted-foreground">
+                    {results.length} result{results.length !== 1 ? 's' : ''} found
+                  </span>
+                </div>
+                {results.length === 0 ? (
+                  <Card>
+                    <CardContent className="pt-6">
+                      <p className="text-center text-muted-foreground">
+                        No documents found matching your search query.
+                      </p>
+                    </CardContent>
+                  </Card>
+                ) : (
+                  <div className="space-y-4">
+                    {results.map((result, index) => (
+                      <Card key={index}>
+                        <CardHeader className="pb-3">
+                          <div className="flex items-center justify-between">
+                            <CardTitle className="text-lg flex items-center gap-2">
+                              <FileText className="h-4 w-4" />
+                              {result.filename}
+                            </CardTitle>
+                            <div className="text-sm text-muted-foreground">
+                              Score: {result.score.toFixed(2)}
+                            </div>
+                          </div>
+                          <CardDescription>
+                            Type: {result.mimetype} • Page {result.page}
+                          </CardDescription>
+                        </CardHeader>
+                        <CardContent>
+                          <div className="border-l-2 border-primary pl-4">
+                            <p className="text-sm leading-relaxed">
+                              {result.text}
+                            </p>
+                          </div>
+                        </CardContent>
+                      </Card>
+                    ))}
+                  </div>
+                )}
+              </div>
+            ) : (
+              <div style={{ minHeight: 120 }} />
+            )}
+          </div>
         </CardContent>
       </Card>
-
-      {searchPerformed && (
-        <div className="space-y-4">
-          <div className="flex items-center justify-between">
-            <h2 className="text-xl font-semibold">Search Results</h2>
-            <span className="text-sm text-muted-foreground">
-              {results.length} result{results.length !== 1 ? 's' : ''} found
-            </span>
-          </div>
-
-          {results.length === 0 ? (
-            <Card>
-              <CardContent className="pt-6">
-                <p className="text-center text-muted-foreground">
-                  No documents found matching your search query.
-                </p>
-              </CardContent>
-            </Card>
-          ) : (
-            <div className="space-y-4">
-              {results.map((result, index) => (
-                <Card key={index}>
-                  <CardHeader className="pb-3">
-                    <div className="flex items-center justify-between">
-                      <CardTitle className="text-lg flex items-center gap-2">
-                        <FileText className="h-4 w-4" />
-                        {result.filename}
-                      </CardTitle>
-                      <div className="text-sm text-muted-foreground">
-                        Score: {result.score.toFixed(2)}
-                      </div>
-                    </div>
-                    <CardDescription>
-                      Type: {result.mimetype} • Page {result.page}
-                    </CardDescription>
-                  </CardHeader>
-                  <CardContent>
-                    <div className="border-l-2 border-primary pl-4">
-                      <p className="text-sm leading-relaxed">
-                        {result.text}
-                      </p>
-                    </div>
-                  </CardContent>
-                </Card>
-              ))}
-            </div>
-          )}
-        </div>
-      )}
     </div>
   )
 }