website refactor

apps/website/components/layout/AppSidebar.tsx

@@ -1,50 +1,54 @@
 'use client';
 
-import { AuthedNav } from '@/components/layout/AuthedNav';
-import { PublicNav } from '@/components/layout/PublicNav';
-import { useCurrentSession } from '@/hooks/auth/useCurrentSession';
+import { BrandMark } from '@/ui/BrandMark';
+import { NavLink } from '@/ui/NavLink';
+import { routes } from '@/lib/routing/RouteConfig';
 import { Box } from '@/ui/Box';
-import { DashboardRail } from '@/components/dashboard/DashboardRail';
-import { Text } from '@/ui/Text';
-import { Surface } from '@/ui/Surface';
+import { Stack } from '@/ui/Stack';
+import { 
+  LayoutGrid, 
+  Trophy, 
+  Users, 
+  Calendar, 
+  Flag, 
+  Home
+} from 'lucide-react';
 import { usePathname } from 'next/navigation';
 
 export function AppSidebar() {
   const pathname = usePathname();
-  const { data: session } = useCurrentSession();
-  const isAuthenticated = !!session;
+
+  const navItems = [
+    { label: 'Home', href: routes.public.home, icon: Home },
+    { label: 'Leagues', href: routes.public.leagues, icon: Trophy },
+    { label: 'Drivers', href: routes.public.drivers, icon: Users },
+    { label: 'Leaderboards', href: routes.public.leaderboards, icon: LayoutGrid },
+    { label: 'Teams', href: routes.public.teams, icon: Flag },
+    { label: 'Races', href: routes.public.races, icon: Calendar },
+  ];
 
   return (
-    <Surface
-      as="aside"
-      variant="dark"
-      width="64"
-      h="full"
-      borderRight
-      backgroundColor="linear-gradient(180deg, #0d0d0e 0%, #0a0a0b 100%)"
-      style={{
-        boxShadow: 'inset -1px 0 0 0 rgba(255, 255, 255, 0.01)',
-      }}
-    >
-      <DashboardRail>
-        <Box py={8} fullWidth>
-          <Box px={6} mb={10}>
-            <Box display="flex" alignItems="center" gap={2} mb={2}>
-              <Box w="0.5" h="3" bg="var(--ui-color-intent-primary)" />
-              <Text size="xs" variant="low" weight="bold" font="mono" letterSpacing="0.2em">
-                DASHBOARD
-              </Text>
-            </Box>
-          </Box>
-          <Box px={4}>
-            {isAuthenticated ? (
-              <AuthedNav pathname={pathname} />
-            ) : (
-              <PublicNav pathname={pathname} />
-            )}
-          </Box>
-        </Box>
-      </DashboardRail>
-    </Surface>
+    <Box display="flex" flexDirection="col" height="full" className="bg-base-black border-r border-outline-steel">
+      {/* Brand Header */}
+      <Box p={6} pb={8}>
+        <BrandMark />
+      </Box>
+
+      {/* Navigation */}
+      <Box flex={1} px={2} className="overflow-y-auto">
+        <Stack gap={1}>
+          {navItems.map((item) => (
+            <NavLink
+              key={item.href}
+              href={item.href}
+              label={item.label}
+              icon={item.icon}
+              isActive={pathname === item.href}
+              variant="sidebar"
+            />
+          ))}
+        </Stack>
+      </Box>
+    </Box>
   );
 }