website refactor

apps/website/templates/layout/GlobalSidebarTemplate.tsx

@@ -0,0 +1,77 @@
+'use client';
+
+import React from 'react';
+import { DashboardRail } from '@/ui/DashboardRail';
+import { Text } from '@/ui/Text';
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
+import { Trophy, Users, Calendar, Layout, Settings, Home } from 'lucide-react';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+
+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 },
+  ];
+
+  return (
+    <DashboardRail>
+      <Box py={6}>
+        <Box px={6} mb={8}>
+          <Text size="xs" color="text-gray-500" weight="bold" font="mono" letterSpacing="0.2em">
+            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={6} mt="auto" pt={6} borderTop borderColor="[#23272B]">
+          <Stack direction="row" align="center" gap={2} mb={4}>
+            <Box w="8px" h="8px" rounded="full" bg="success-green" />
+            <Text size="xs" color="text-gray-400" font="mono">
+              SYSTEM ONLINE
+            </Text>
+          </Stack>
+        </Box>
+      </Box>
+    </DashboardRail>
+  );
+}