mmintel/gridpilot.gg
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

website refactor

Browse Source
This commit is contained in:
Marc Mintel
2026-01-20 00:41:57 +01:00
parent f5215f9d73
commit b9624db452
8 changed files with 316 additions and 165 deletions
Download Patch File Download Diff File Expand all files Collapse all files

127
apps/website/components/layout/AppSidebar.tsx
View File

@@ -3,7 +3,6 @@
import { BrandMark } from '@/ui/BrandMark';
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 {
@@ -18,6 +17,8 @@ import {
} from 'lucide-react';
import { usePathname } from 'next/navigation';
import { useSidebar } from '@/components/layout/SidebarContext';
import { ShellSidebar } from '@/ui/shell/Shell';
import { Button } from '@/ui/Button';
export function AppSidebar() {
const pathname = usePathname();
@@ -36,76 +37,64 @@ export function AppSidebar() {
];
return (
<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} display="flex" alignItems="center" justifyContent={isCollapsed ? 'center' : 'start'}>
<BrandMark collapsed={isCollapsed} />
</Box>
{/* Navigation */}
<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
<ShellSidebar
collapsed={isCollapsed}
header={<BrandMark collapsed={isCollapsed} />}
footer={
<Button
icon={isCollapsed ? <ChevronRight size={16} /> : <ChevronLeft size={16} />}
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"}
variant="ghost"
fullWidth
justifyContent={isCollapsed ? 'center' : 'start'}
>
{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>
</>
{!isCollapsed && "Collapse"}
</Button>
}
>
<Stack gap={8}>
<Stack gap={3}>
{!isCollapsed && (
<Text size="xs" variant="low" weight="bold" uppercase>
Platform
</Text>
)}
</button>
</Box>
</Box>
<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>
</Stack>
<Stack gap={3}>
{!isCollapsed && (
<Text size="xs" variant="low" weight="bold" uppercase>
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>
</Stack>
</Stack>
</ShellSidebar>
);
}