website refactor

apps/website/components/layout/AppSidebar.tsx

@@ -5,50 +5,107 @@ import { NavLink } from '@/ui/NavLink';
 import { routes } from '@/lib/routing/RouteConfig';
 import { Box } from '@/ui/Box';
 import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
 import { 
   LayoutGrid, 
   Trophy, 
   Users, 
   Calendar, 
   Flag, 
-  Home
+  Home,
+  ChevronLeft,
+  ChevronRight
 } from 'lucide-react';
 import { usePathname } from 'next/navigation';
+import { useSidebar } from '@/components/layout/SidebarContext';
 
 export function AppSidebar() {
   const pathname = usePathname();
+  const { isCollapsed, toggleCollapse } = useSidebar();
 
-  const navItems = [
+  const mainItems = [
     { 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 },
+  ];
+
+  const competitionItems = [
     { label: 'Races', href: routes.public.races, icon: Calendar },
+    { label: 'Leaderboards', href: routes.public.leaderboards, icon: LayoutGrid },
   ];
 
   return (
-    <Box display="flex" flexDirection="col" height="full" className="bg-base-black border-r border-outline-steel">
+    <Box display="flex" flexDirection="col" height="full" className="bg-base-black border-r border-white/10 relative transition-all duration-300 ease-in-out">
       {/* Brand Header */}
-      <Box p={6} pb={8}>
-        <BrandMark />
+      <Box p={6} pb={8} display="flex" alignItems="center" justifyContent={isCollapsed ? 'center' : 'start'}>
+        <BrandMark collapsed={isCollapsed} />
       </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"
-            />
-          ))}
+      <Box flex={1} px={isCollapsed ? 2 : 4} className="overflow-y-auto scrollbar-hide transition-all duration-300">
+        <Stack gap={8}>
+          <Box>
+            {!isCollapsed && (
+              <Text size="xs" className="px-1 mb-3 text-text-low/40 font-mono uppercase tracking-widest text-[10px] font-bold transition-opacity duration-300">
+                Platform
+              </Text>
+            )}
+            <Stack gap={3}>
+              {mainItems.map((item) => (
+                <NavLink
+                  key={item.href}
+                  href={item.href}
+                  label={item.label}
+                  icon={item.icon}
+                  isActive={pathname === item.href}
+                  variant="sidebar"
+                  collapsed={isCollapsed}
+                />
+              ))}
+            </Stack>
+          </Box>
+
+          <Box>
+            {!isCollapsed && (
+              <Text size="xs" className="px-1 mb-3 text-text-low/40 font-mono uppercase tracking-widest text-[10px] font-bold transition-opacity duration-300">
+                Competition
+              </Text>
+            )}
+            <Stack gap={3}>
+              {competitionItems.map((item) => (
+                <NavLink
+                  key={item.href}
+                  href={item.href}
+                  label={item.label}
+                  icon={item.icon}
+                  isActive={pathname === item.href}
+                  variant="sidebar"
+                  collapsed={isCollapsed}
+                />
+              ))}
+            </Stack>
+          </Box>
         </Stack>
       </Box>
+
+      {/* Bottom Actions */}
+      <Box className="h-14 flex items-center px-4 border-t border-white/10">
+        <button 
+          onClick={toggleCollapse}
+          className={`flex items-center ${isCollapsed ? 'justify-center' : 'justify-start'} gap-2 text-text-low hover:text-text-high transition-colors px-2 py-2 rounded-md hover:bg-white/5 w-full group`}
+          title={isCollapsed ? "Expand Sidebar" : "Collapse Sidebar"}
+        >
+          {isCollapsed ? (
+            <ChevronRight size={16} className="group-hover:translate-x-1 transition-transform" />
+          ) : (
+            <>
+              <ChevronLeft size={16} className="group-hover:-translate-x-1 transition-transform" />
+              <Text size="xs" className="font-medium">Collapse</Text>
+            </>
+          )}
+        </button>
+      </Box>
     </Box>
   );
 }