Feat/side bar component

src/app/dashboard/layout.tsx

@@ -0,0 +1,9 @@
+import { DashboardShell } from "@/components/layout/DashboardShell";
+
+export default function DashboardLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return <DashboardShell>{children}</DashboardShell>;
+}

src/components/layout/DashboardShell.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import { useState } from "react";
+import { Menu } from "lucide-react";
+
+import { Sidebar } from "./Sidebar";
+
+export function DashboardShell({ children }: { children: React.ReactNode }) {
+  const [sidebarOpen, setSidebarOpen] = useState(false);
+
+  return (
+    <div className="flex h-screen overflow-hidden bg-background">
+      <Sidebar
+        isOpen={sidebarOpen}
+        onClose={() => setSidebarOpen(false)}
+      />
+
+      <div className="flex min-w-0 flex-1 flex-col overflow-hidden">
+        {/* Mobile top bar */}
+        <header className="flex h-16 shrink-0 items-center border-b px-4 lg:hidden">
+          <button
+            onClick={() => setSidebarOpen(true)}
+            className="rounded-md p-2 text-foreground/70 hover:text-foreground"
+            aria-label="Open sidebar"
+          >
+            <Menu className="size-5" />
+          </button>
+        </header>
+
+        <main className="flex-1 overflow-y-auto">{children}</main>
+      </div>
+    </div>
+  );
+}

src/components/layout/Sidebar.tsx

@@ -0,0 +1,89 @@
+"use client";
+
+import Image from "next/image";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { LayoutDashboard, FileText, RefreshCw, Settings, X } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const NAV_ITEMS = [
+  { href: "/dashboard", label: "Dashboard", icon: LayoutDashboard },
+  { href: "/invoices", label: "Invoices", icon: FileText },
+  { href: "/subscriptions", label: "Subscriptions", icon: RefreshCw },
+  { href: "/settings", label: "Settings", icon: Settings },
+];
+
+type SidebarProps = {
+  isOpen: boolean;
+  onClose: () => void;
+};
+
+export function Sidebar({ isOpen, onClose }: SidebarProps) {
+  const pathname = usePathname();
+
+  return (
+    <>
+      {/* Mobile backdrop */}
+      {isOpen && (
+        <div
+          className="fixed inset-0 z-20 bg-black/40 lg:hidden"
+          onClick={onClose}
+        />
+      )}
+
+      <aside
+        className={cn(
+          "fixed inset-y-0 left-0 z-30 flex h-screen w-64 shrink-0 flex-col border-r bg-sidebar text-sidebar-foreground transition-transform duration-200",
+          "lg:static lg:translate-x-0",
+          isOpen ? "translate-x-0" : "-translate-x-full",
+        )}
+      >
+        <div className="flex h-16 items-center justify-between border-b px-6">
+          <div className="flex items-center gap-2.5">
+            <Image
+              src="/shade_logo_transparent.png"
+              alt="Shade logo"
+              width={28}
+              height={28}
+              className="shrink-0"
+            />
+            <span className="text-lg font-bold tracking-tight text-sidebar-primary">
+              Shade
+            </span>
+          </div>
+          <button
+            onClick={onClose}
+            className="rounded-md p-1 text-sidebar-foreground/70 hover:text-sidebar-foreground lg:hidden"
+            aria-label="Close sidebar"
+          >
+            <X className="size-4" />
+          </button>
+        </div>
+
+        <nav className="flex-1 space-y-0.5 px-3 py-4">
+          {NAV_ITEMS.map(({ href, label, icon: Icon }) => {
+            const isActive =
+              pathname === href || pathname.startsWith(`${href}/`);
+            return (
+              <Link
+                key={href}
+                href={href}
+                onClick={onClose}
+                className={cn(
+                  "flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors",
+                  isActive
+                    ? "bg-sidebar-accent text-sidebar-primary"
+                    : "text-sidebar-foreground/70 hover:bg-sidebar-accent/50 hover:text-sidebar-foreground",
+                )}
+              >
+                <Icon className="size-4 shrink-0" />
+                {label}
+              </Link>
+            );
+          })}
+        </nav>
+      </aside>
+    </>
+  );
+}