Add persistent left sidebar navigation and localStorage theme persistence

Author: wendellmva

site/src/components/layout.tsx

@@ -1,7 +1,7 @@
 import { Link, useLocation } from "react-router-dom";
 import { cn } from "@/lib/utils";
 import { Button } from "@/components/ui/button";
-import { Moon, Sun, Github, Menu, X } from "lucide-react";
+import { Moon, Sun, Github } from "lucide-react";
 import { useState, useEffect } from "react";
 
 const navigation = [
@@ -15,15 +15,19 @@ const navigation = [
 
 export function Layout({ children }: { children: React.ReactNode }) {
   const location = useLocation();
-  const [isDark, setIsDark] = useState(false);
-  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
+  const [isDark, setIsDark] = useState(() => {
+    const saved = localStorage.getItem("theme");
+    return saved === "dark";
+  });
 
   useEffect(() => {
     const root = document.documentElement;
     if (isDark) {
       root.classList.add("dark");
+      localStorage.setItem("theme", "dark");
     } else {
       root.classList.remove("dark");
+      localStorage.setItem("theme", "light");
     }
   }, [isDark]);
 
@@ -39,24 +43,6 @@ export function Layout({ children }: { children: React.ReactNode }) {
             <span className="font-bold text-lg">FactoryTools</span>
           </Link>
 
-          {/* Desktop Navigation */}
-          <nav className="hidden md:flex items-center space-x-6 ml-8">
-            {navigation.map((item) => (
-              <Link
-                key={item.href}
-                to={item.href}
-                className={cn(
-                  "text-sm font-medium transition-colors hover:text-primary",
-                  location.pathname === item.href
-                    ? "text-primary"
-                    : "text-muted-foreground"
-                )}
-              >
-                {item.name}
-              </Link>
-            ))}
-          </nav>
-
           <div className="flex items-center ml-auto space-x-2">
             <Button
               variant="ghost"
@@ -74,47 +60,42 @@ export function Layout({ children }: { children: React.ReactNode }) {
                 <Github className="h-5 w-5" />
               </a>
             </Button>
-            <Button
-              variant="ghost"
-              size="icon"
-              className="md:hidden"
-              onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
-            >
-              {mobileMenuOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
-            </Button>
           </div>
         </div>
+      </header>
 
-        {/* Mobile Navigation */}
-        {mobileMenuOpen && (
-          <nav className="md:hidden border-t p-4">
+      <div className="flex">
+        {/* Left Sidebar */}
+        <aside className="sticky top-14 h-[calc(100vh-3.5rem)] w-64 border-r bg-sidebar overflow-y-auto">
+          <nav className="flex flex-col gap-1 p-4">
             {navigation.map((item) => (
               <Link
                 key={item.href}
                 to={item.href}
-                onClick={() => setMobileMenuOpen(false)}
                 className={cn(
-                  "block py-2 text-sm font-medium transition-colors hover:text-primary",
+                  "px-3 py-2 rounded-md text-sm font-medium transition-colors",
                   location.pathname === item.href
-                    ? "text-primary"
-                    : "text-muted-foreground"
+                    ? "bg-sidebar-accent text-sidebar-accent-foreground"
+                    : "text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
                 )}
               >
                 {item.name}
               </Link>
             ))}
           </nav>
-        )}
-      </header>
+        </aside>
 
-      {/* Main Content */}
-      <main className="container mx-auto px-4 py-8">
-        {children}
-      </main>
+        {/* Main Content */}
+        <main className="flex-1 overflow-y-auto">
+          <div className="container mx-auto px-4 py-8 max-w-5xl">
+            {children}
+          </div>
+        </main>
+      </div>
 
       {/* Footer */}
       <footer className="border-t py-6 md:py-0">
-        <div className="container mx-auto flex flex-col items-center justify-between gap-4 px-4 md:h-16 md:flex-row">
+        <div className="container mx-auto flex flex-col items-center justify-between gap-4 px-4 md:h-16 md:flex-row ml-64">
           <p className="text-sm text-muted-foreground">
             © {new Date().getFullYear()} LowlandTech. All rights reserved.
           </p>