website refactor

apps/website/templates/layout/GlobalSidebarTemplate.tsx

@@ -2,25 +2,18 @@
 
 import { Box } from '@/ui/Box';
 import { DashboardRail } from '@/ui/DashboardRail';
-import { Stack } from '@/ui/Stack';
 import { Text } from '@/ui/Text';
-import { Calendar, Home, Layout, Settings, Trophy, Users } from 'lucide-react';
-import Link from 'next/link';
 import { usePathname } from 'next/navigation';
+import { useCurrentSession } from '@/hooks/auth/useCurrentSession';
+import { PublicNav } from '@/components/layout/PublicNav';
+import { AuthedNav } from '@/components/layout/AuthedNav';
 
 export interface GlobalSidebarViewData {}
 
 export function GlobalSidebarTemplate(_props: GlobalSidebarViewData) {
   const pathname = usePathname();
-
-  const navItems = [
-    { label: 'Dashboard', href: '/', icon: Home },
-    { label: 'Leagues', href: '/leagues', icon: Trophy },
-    { label: 'Teams', href: '/teams', icon: Users },
-    { label: 'Races', href: '/races', icon: Calendar },
-    { label: 'Leaderboards', href: '/leaderboards', icon: Layout },
-    { label: 'Settings', href: '/settings', icon: Settings },
-  ];
+  const { data: session } = useCurrentSession();
+  const isAuthenticated = !!session;
 
   return (
     <DashboardRail>
@@ -30,37 +23,13 @@ export function GlobalSidebarTemplate(_props: GlobalSidebarViewData) {
             NAVIGATION
           </Text>
         </Box>
-        <Stack as="nav" flexGrow={1} px={3} direction="col" gap={1}>
-          {navItems.map((item) => {
-            const isActive = pathname === item.href;
-            const Icon = item.icon;
-            return (
-              <Box
-                key={item.href}
-                as={Link}
-                href={item.href}
-                display="flex"
-                alignItems="center"
-                gap={3}
-                px={3}
-                py={2}
-                rounded="md"
-                transition
-                bg={isActive ? 'primary-accent/10' : 'transparent'}
-                color={isActive ? 'primary-accent' : 'text-gray-400'}
-                hoverBg={isActive ? 'primary-accent/10' : 'white/5'}
-                hoverTextColor={isActive ? 'primary-accent' : 'white'}
-                group
-              >
-                <Icon size={20} color={isActive ? '#198CFF' : '#6B7280'} />
-                <Text weight="medium">{item.label}</Text>
-                {isActive && (
-                  <Box ml="auto" w="4px" h="16px" bg="primary-accent" rounded="full" shadow="[0_0_8px_rgba(25,140,255,0.5)]" />
-                )}
-              </Box>
-            );
-          })}
-        </Stack>
+        <Box px={3}>
+          {isAuthenticated ? (
+            <AuthedNav pathname={pathname} />
+          ) : (
+            <PublicNav pathname={pathname} />
+          )}
+        </Box>
       </Box>
     </DashboardRail>
   );