website refactor

2026-01-17 15:46:55 +01:00
parent 4d5ce9bfd6
commit 72a626ce71
346 changed files with 19308 additions and 8605 deletions
--- a/apps/website/templates/ProfileSidebarTemplate.tsx
+++ b/apps/website/templates/ProfileSidebarTemplate.tsx
@@ -0,0 +1,77 @@
+'use client';
+
+import React from 'react';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
+import { Icon } from '@/ui/Icon';
+import { 
+  User, 
+  Settings, 
+  Trophy, 
+  Palette, 
+  Handshake 
+} from 'lucide-react';
+import { routes } from '@/lib/routing/RouteConfig';
+
+import { ProfileLayoutViewData } from '@/lib/view-data/ProfileLayoutViewData';
+
+export function ProfileSidebarTemplate({ viewData: _viewData }: { viewData: ProfileLayoutViewData }) {
+  const pathname = usePathname();
+
+  const navItems = [
+    { label: 'Overview', href: routes.protected.profile, icon: User },
+    { label: 'Leagues', href: routes.protected.profileLeagues, icon: Trophy },
+    { label: 'Liveries', href: routes.protected.profileLiveries, icon: Palette },
+    { label: 'Sponsorships', href: routes.protected.profileSponsorshipRequests, icon: Handshake },
+    { label: 'Settings', href: routes.protected.profileSettings, icon: Settings },
+  ];
+
+  return (
+    <Box width="240px" flexShrink={0}>
+      <Stack gap={1}>
+        {navItems.map((item) => {
+          const isActive = pathname === item.href;
+          return (
+            <Link key={item.href} href={item.href}>
+              <Box
+                px={4}
+                py={2.5}
+                rounded="md"
+                backgroundColor={isActive ? 'rgba(25, 140, 255, 0.1)' : 'transparent'}
+                color={isActive ? '#198CFF' : '#9ca3af'}
+                transition
+                display="flex"
+                alignItems="center"
+                gap={3}
+                cursor="pointer"
+                border
+                borderColor={isActive ? 'rgba(25, 140, 255, 0.2)' : 'transparent'}
+              >
+                <Icon icon={item.icon} size={4} color={isActive ? '#198CFF' : '#9ca3af'} />
+                <Text 
+                  size="sm" 
+                  weight={isActive ? 'bold' : 'medium'}
+                  color={isActive ? '#198CFF' : '#9ca3af'}
+                >
+                  {item.label}
+                </Text>
+                {isActive && (
+                  <Box 
+                    ml="auto" 
+                    width="4px" 
+                    height="4px" 
+                    rounded="full"
+                    backgroundColor="#198CFF" 
+                  />
+                )}
+              </Box>
+            </Link>
+          );
+        })}
+      </Stack>
+    </Box>
+  );
+}