Seed: saas template (34 files)

src/components/Sidebar.tsx

@@ -0,0 +1,72 @@
+import { useState } from "react";
+import { Link, useLocation } from "react-router-dom";
+import { LayoutDashboard, BarChart3, Users, Settings, Layers, Menu } from "lucide-react";
+import { Sheet, SheetTrigger, SheetContent } from "@/components/ui/sheet";
+import { Button } from "@/components/ui/button";
+
+const navItems = [
+  { label: "Dashboard", to: "/dashboard", icon: LayoutDashboard },
+  { label: "Analytics", to: "/analytics", icon: BarChart3 },
+  { label: "Customers", to: "/customers", icon: Users },
+  { label: "Settings", to: "/settings", icon: Settings },
+];
+
+function SidebarContent({ activePath }: { activePath: string }) {
+  return (
+    <div className="flex flex-col h-full">
+      <div className="flex items-center gap-2 px-6 py-6">
+        <div className="h-8 w-8 rounded-lg bg-gradient-to-br from-indigo-500 to-cyan-500 flex items-center justify-center">
+          <Layers className="h-4 w-4 text-white" />
+        </div>
+        <span className="text-lg font-bold text-white tracking-tight">Nexus</span>
+      </div>
+      <nav className="flex-1 px-3 space-y-1 mt-4">
+        {navItems.map((item) => {
+          const Icon = item.icon;
+          const isActive = activePath === item.to;
+          return (
+            <Link
+              key={item.to}
+              to={item.to}
+              className={`flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-colors \${
+                isActive
+                  ? "bg-indigo-500/15 text-indigo-400 border-l-2 border-indigo-400"
+                  : "text-slate-400 hover:text-white hover:bg-white/5"
+              }`}
+            >
+              <Icon className="h-4 w-4" />
+              {item.label}
+            </Link>
+          );
+        })}
+      </nav>
+    </div>
+  );
+}
+
+export default function Sidebar({ activePath }: { activePath?: string }) {
+  const location = useLocation();
+  const path = activePath || location.pathname;
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      {/* Desktop sidebar */}
+      <aside className="hidden lg:flex fixed inset-y-0 left-0 z-40 w-64 flex-col bg-slate-900/95 backdrop-blur-xl border-r border-slate-800">
+        <SidebarContent activePath={path} />
+      </aside>
+
+      {/* Mobile sidebar via Sheet */}
+      <Sheet open={open} onOpenChange={setOpen}>
+        <SheetTrigger asChild className="lg:hidden fixed top-4 left-4 z-50">
+          <Button variant="ghost" size="icon" className="text-slate-600">
+            <Menu className="h-5 w-5" />
+          </Button>
+        </SheetTrigger>
+        <SheetContent side="left" className="w-64 p-0 bg-slate-900/95 backdrop-blur-xl border-r border-slate-800">
+          <SidebarContent activePath={path} />
+        </SheetContent>
+      </Sheet>
+    </>
+  );
+}