feat: add dashboard layout components

Author: Arun-kushwaha007

apps/web/src/components/layout/AppLayout.tsx

@@ -0,0 +1,5 @@
+import { ReactNode } from 'react';
+
+export function AppLayout({ children }: { children: ReactNode }) {
+  return <div className="min-h-dvh">{children}</div>;
+}

apps/web/src/components/layout/DashboardLayout.tsx

@@ -0,0 +1,20 @@
+import { ReactNode } from 'react';
+import { AppLayout } from './AppLayout';
+import { Sidebar } from './Sidebar';
+import { Topbar } from './Topbar';
+
+export function DashboardLayout({ children, topbarRight }: { children: ReactNode; topbarRight?: ReactNode }) {
+  return (
+    <AppLayout>
+      <div className="mx-auto max-w-7xl px-4 py-6 md:px-6 md:py-10">
+        <div className="grid gap-6 md:grid-cols-[260px_1fr]">
+          <Sidebar />
+          <main className="space-y-6">
+            <Topbar rightSlot={topbarRight} />
+            {children}
+          </main>
+        </div>
+      </div>
+    </AppLayout>
+  );
+}

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

@@ -0,0 +1,56 @@
+'use client';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+
+const items = [
+  { href: '/dashboard', label: 'Dashboard' },
+  { href: '/dashboard/groups', label: 'Groups' },
+  { href: '/dashboard/activity', label: 'Activity' },
+  { href: '/dashboard/profile', label: 'Profile' },
+  { href: '/dashboard/settings', label: 'Settings' },
+] as const;
+
+function isActive(pathname: string, href: string): boolean {
+  if (href === '/dashboard') {
+    return pathname === href;
+  }
+  return pathname === href || pathname.startsWith(`${href}/`);
+}
+
+export function Sidebar() {
+  const pathname = usePathname();
+
+  return (
+    <aside className="md:sticky md:top-6">
+      <div className="rounded-2xl border border-border bg-card p-4 shadow-glass backdrop-blur-glass">
+        <div className="flex items-center justify-between">
+          <Link href="/dashboard" className="text-sm font-semibold tracking-wide text-text-primary">
+            FairShare
+          </Link>
+          <span className="text-xs text-text-secondary">Web</span>
+        </div>
+
+        <nav className="mt-4 flex gap-1 overflow-x-auto md:flex-col md:gap-1.5 md:overflow-visible">
+          {items.map((item) => {
+            const active = isActive(pathname, item.href);
+            return (
+              <Link
+                key={item.href}
+                href={item.href}
+                className={[
+                  'whitespace-nowrap rounded-xl px-3 py-2 text-sm transition',
+                  active
+                    ? 'bg-white/10 text-text-primary'
+                    : 'text-text-secondary hover:bg-white/5 hover:text-text-primary',
+                ].join(' ')}
+              >
+                {item.label}
+              </Link>
+            );
+          })}
+        </nav>
+      </div>
+    </aside>
+  );
+}

apps/web/src/components/layout/Topbar.tsx

@@ -0,0 +1,27 @@
+'use client';
+
+import { usePathname } from 'next/navigation';
+
+function titleFromPath(pathname: string): string {
+  if (pathname === '/dashboard') return 'Dashboard';
+  if (pathname.startsWith('/dashboard/groups')) return 'Groups';
+  if (pathname.startsWith('/dashboard/activity')) return 'Activity';
+  if (pathname.startsWith('/dashboard/profile')) return 'Profile';
+  if (pathname.startsWith('/dashboard/settings')) return 'Settings';
+  return 'FairShare';
+}
+
+export function Topbar({ rightSlot }: { rightSlot?: React.ReactNode }) {
+  const pathname = usePathname();
+  const title = titleFromPath(pathname);
+
+  return (
+    <header className="flex items-center justify-between gap-3">
+      <div>
+        <h1 className="text-xl font-semibold tracking-tight text-text-primary md:text-2xl">{title}</h1>
+        <p className="mt-1 text-sm text-text-secondary">Manage your groups and shared expenses.</p>
+      </div>
+      <div className="flex items-center gap-2">{rightSlot}</div>
+    </header>
+  );
+}

apps/web/src/components/layout/index.ts

@@ -0,0 +1,4 @@
+export * from './AppLayout';
+export * from './DashboardLayout';
+export * from './Sidebar';
+export * from './Topbar';

apps/web/src/components/layout/layoutStyles.ts

@@ -0,0 +1,3 @@
+export const glassClassName =
+  'rounded-2xl border border-border bg-card shadow-glass backdrop-blur-glass supports-[backdrop-filter]:bg-card';
+