initial commit

apps/frontend/src/components/layout/Sidebar.tsx

@@ -0,0 +1,54 @@
+import { Link } from "@tanstack/react-router";
+import { FileText, LayoutDashboard, TrendingUp, Wallet } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+const navItems = [
+  { to: "/", label: "Panel", icon: LayoutDashboard },
+  { to: "/expenses", label: "Gastos", icon: Wallet },
+  { to: "/quotes", label: "Cotizaciones", icon: FileText },
+  { to: "/quotes/belo", label: "BELO", icon: TrendingUp },
+];
+
+interface SidebarProps {
+  open: boolean;
+  onClose: () => void;
+}
+
+export function Sidebar({ open, onClose }: SidebarProps) {
+  return (
+    <>
+      {open && (
+        <div
+          className="fixed inset-0 z-40 bg-black/20 md:hidden"
+          onClick={onClose}
+        />
+      )}
+      <aside
+        className={cn(
+          "fixed inset-y-0 left-0 z-50 flex w-60 flex-col border-r bg-sidebar transition-transform duration-200 md:relative md:translate-x-0",
+          open ? "translate-x-0" : "-translate-x-full",
+        )}
+      >
+        <div className="flex h-14 items-center border-b px-4">
+          <span className="text-lg font-semibold text-sidebar-foreground">
+            Personal Admin
+          </span>
+        </div>
+        <nav className="flex-1 space-y-1 p-3">
+          {navItems.map((item) => (
+            <Link
+              key={item.to}
+              to={item.to}
+              activeProps={{ className: "bg-sidebar-accent text-sidebar-accent-foreground font-medium" }}
+              className="flex items-center gap-3 rounded-lg px-3 py-2 text-sm text-sidebar-foreground/70 transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
+              onClick={onClose}
+            >
+              <item.icon className="size-4" />
+              {item.label}
+            </Link>
+          ))}
+        </nav>
+      </aside>
+    </>
+  );
+}