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:33:24 +01:00
parent 6df1b50536
commit e9dfe15dff
12 changed files with 376 additions and 224 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/website/components/dev/DevToolbar.tsx
View File

@@ -245,7 +245,7 @@ export function DevToolbar() {
<Stack
position="fixed"
right={4}
bottom={4}
bottom={24}
zIndex={1000}
width="min(420px, calc(100vw - 2rem))"
maxHeight="calc(100vh - 2rem)"

55
apps/website/components/layout/AppFooter.tsx
View File

@@ -1,43 +1,47 @@
'use client';
import { Box } from '@/ui/Box';
import { Text } from '@/ui/Text';
import { Link } from '@/ui/Link';
import { Text } from '@/ui/Text';
import { useEffect, useState } from 'react';
import { AppShellBar } from './AppShellBar';
import { Activity, Database, Server, Wifi } from 'lucide-react';
export function AppFooter() {
const currentYear = new Date().getFullYear();
// Clock
const [time, setTime] = useState<string>('');
useEffect(() => {
const updateTime = () => {
const now = new Date();
setTime(now.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', hour12: false }));
};
updateTime();
const interval = setInterval(updateTime, 60000);
return () => clearInterval(interval);
}, []);
return (
<AppShellBar position="bottom">
{/* Left: System Info */}
<Box display="flex" alignItems="center" gap={6}>
<Box display="flex" alignItems="center" gap={6} flex={1}>
<Box display="flex" alignItems="center" gap={2}>
<Box className="w-2 h-2 bg-success-green rounded-full animate-pulse" />
<Text size="xs" className="text-text-med font-mono text-[10px] uppercase tracking-wider">
GRIDPILOT OS v2.0
GRIDPILOT
</Text>
</Box>
<Text size="xs" className="text-text-low font-mono text-[10px] uppercase tracking-wider hidden md:block">
© {currentYear}
</Box>
{/* Center: Time */}
<Box display="flex" alignItems="center" justifyContent="center" flex={1}>
<Text size="sm" font="mono" className="text-text-med tracking-widest tabular-nums">
{time} UTC
</Text>
</Box>
{/* Center: Telemetry Status */}
<Box display="flex" alignItems="center" gap={6} className="hidden md:flex">
<StatusIndicator icon={Database} label="DB" status="good" />
<StatusIndicator icon={Server} label="API" status="good" />
<StatusIndicator icon={Wifi} label="WS" status="good" />
<Box className="h-3 w-px bg-outline-steel" />
<Box display="flex" alignItems="center" gap={2}>
<Activity size={12} className="text-text-low" />
<Text size="xs" className="text-text-med font-mono text-[10px]">12ms</Text>
</Box>
</Box>
{/* Right: Legal & Tools */}
<Box display="flex" alignItems="center" gap={2}>
<Box display="flex" alignItems="center" justifyContent="end" gap={2} flex={1}>
<FooterLink href="/terms">Terms</FooterLink>
<FooterLink href="/privacy">Privacy</FooterLink>
<FooterLink href="/status">Status</FooterLink>
@@ -46,19 +50,6 @@ export function AppFooter() {
);
}
function StatusIndicator({ icon: Icon, label, status }: { icon: any, label: string, status: 'good' | 'warn' | 'bad' }) {
const color = status === 'good' ? 'text-success-green' : status === 'warn' ? 'text-warning-amber' : 'text-critical-red';
return (
<Box display="flex" alignItems="center" gap={2} title={`${label}: ${status.toUpperCase()}`}>
<Icon size={10} className={color} />
<Text size="xs" className="text-text-low font-mono text-[10px] uppercase tracking-wider">
{label}
</Text>
</Box>
);
}
function FooterLink({ href, children }: { href: string, children: React.ReactNode }) {
return (
<Link

138
apps/website/components/layout/AppHeader.tsx
View File

@@ -2,18 +2,19 @@
import { Box } from '@/ui/Box';
import { Text } from '@/ui/Text';
import { Search, Bell, User, ChevronDown, Command } from 'lucide-react';
import { Search, Bell, Command } from 'lucide-react';
import { usePathname } from 'next/navigation';
import { useCurrentSession } from '@/hooks/auth/useCurrentSession';
import { routes } from '@/lib/routing/RouteConfig';
import { Button } from '@/ui/Button';
import { useState, useEffect } from 'react';
import { AppShellBar } from './AppShellBar';
import { CommandModal } from './CommandModal';
import { UserPill } from '@/components/profile/UserPill';
export function AppHeader() {
const pathname = usePathname();
const { data: session } = useCurrentSession();
const isAuthenticated = !!session;
const [isCommandOpen, setIsCommandOpen] = useState(false);
// Simple breadcrumb logic
const pathSegments = pathname.split('/').filter(Boolean);
@@ -21,99 +22,64 @@ export function AppHeader() {
? pathSegments.map(s => s.charAt(0).toUpperCase() + s.slice(1)).join(' / ')
: 'Home';
// Clock
const [time, setTime] = useState<string>('');
// Cmd+K Listener
useEffect(() => {
const updateTime = () => {
const now = new Date();
setTime(now.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', hour12: false }));
const down = (e: KeyboardEvent) => {
if (e.key === 'k' && (e.metaKey || e.ctrlKey)) {
e.preventDefault();
setIsCommandOpen((open) => !open);
}
};
updateTime();
const interval = setInterval(updateTime, 60000);
return () => clearInterval(interval);
document.addEventListener('keydown', down);
return () => document.removeEventListener('keydown', down);
}, []);
return (
<AppShellBar position="top">
{/* Left: Context & Search */}
<Box display="flex" alignItems="center" gap={6} flex={1}>
<Text size="sm" className="text-text-med font-medium tracking-wide whitespace-nowrap min-w-[100px]">
{breadcrumbs}
</Text>
{/* Command Search - Refined */}
<Box
className="hidden md:flex items-center gap-3 px-3 h-9 bg-surface-charcoal/50 border border-outline-steel rounded-md w-96 text-text-low hover:border-text-low/50 focus-within:border-primary-accent focus-within:ring-1 focus-within:ring-primary-accent/20 transition-all cursor-text group"
>
<Search size={14} className="text-text-low group-hover:text-text-med transition-colors" />
<Box
as="input"
type="text"
placeholder="Search or type a command..."
className="bg-transparent border-none outline-none text-sm w-full text-text-high placeholder:text-text-low/50 h-full"
/>
<Box className="flex items-center gap-1 px-1.5 py-0.5 rounded bg-white/5 border border-white/5 text-[10px] font-mono text-text-low">
<Command size={10} />
<span>K</span>
</Box>
</Box>
</Box>
{/* Right: System Status & User */}
<Box display="flex" alignItems="center" gap={4}>
{/* System Time */}
<Box className="hidden lg:flex items-center gap-2 text-text-med border-r border-outline-steel pr-4 h-6">
<Text size="sm" font="mono" className="tracking-widest tabular-nums">
{time} UTC
<>
<AppShellBar position="top">
{/* Left: Context & Search */}
<Box display="flex" alignItems="center" gap={6} flex={1}>
<Text size="sm" className="text-text-med font-medium tracking-wide whitespace-nowrap min-w-[100px]">
{breadcrumbs}
</Text>
{/* Command Search Trigger */}
<button
type="button"
onClick={() => setIsCommandOpen(true)}
className="hidden md:flex items-center gap-3 px-3 h-9 bg-surface-charcoal border border-outline-steel rounded-md w-96 text-text-low hover:border-text-low/50 hover:text-text-med transition-all group cursor-pointer"
>
<Search size={14} className="text-text-low group-hover:text-text-med transition-colors" />
<span className="flex-1 text-left text-sm text-text-low/70">
Search or type a command...
</span>
<div className="flex items-center gap-1 px-1.5 py-0.5 rounded bg-white/5 border border-white/5 text-[10px] font-mono text-text-low">
<Command size={10} />
<span>K</span>
</div>
</button>
</Box>
{/* Notifications */}
<Box
as="button"
className="w-8 h-8 flex items-center justify-center text-text-low hover:text-text-high hover:bg-white/5 transition-colors rounded-md relative"
title="Notifications"
>
<Bell size={16} />
<Box className="absolute top-2 right-2 w-1.5 h-1.5 bg-primary-accent rounded-full ring-2 ring-base-black" />
</Box>
{/* User Menu */}
{isAuthenticated ? (
<Box display="flex" alignItems="center" gap={3} className="pl-2 cursor-pointer group">
{/* Right: User & Notifications */}
<Box display="flex" alignItems="center" gap={4}>
{/* Notifications - Only when authed */}
{isAuthenticated && (
<Box
className="w-8 h-8 rounded-full bg-surface-charcoal flex items-center justify-center text-text-med border border-outline-steel group-hover:border-primary-accent transition-colors"
as="button"
className="w-8 h-8 flex items-center justify-center text-text-low hover:text-text-high hover:bg-white/5 transition-colors rounded-md relative"
title="Notifications"
>
<User size={14} />
<Bell size={16} />
<Box className="absolute top-2 right-2 w-1.5 h-1.5 bg-primary-accent rounded-full ring-2 ring-base-black" />
</Box>
<Box className="hidden md:block text-left">
<Text size="sm" weight="medium" className="text-text-high leading-none group-hover:text-primary-accent transition-colors">
{session.user.displayName || 'Driver'}
</Text>
</Box>
<ChevronDown size={12} className="text-text-low group-hover:text-text-high transition-colors" />
</Box>
) : (
<Box display="flex" gap={2}>
<Button
as="a"
href={routes.auth.login}
variant="ghost"
size="sm"
>
Sign In
</Button>
<Button
as="a"
href={routes.auth.signup}
variant="primary"
size="sm"
>
Join
</Button>
</Box>
)}
</Box>
</AppShellBar>
)}
{/* User Pill (Handles Auth & Menu) */}
<UserPill />
</Box>
</AppShellBar>
<CommandModal isOpen={isCommandOpen} onClose={() => setIsCommandOpen(false)} />
</>
);
}

17
apps/website/components/layout/AppShellBar.tsx
View File

@@ -2,6 +2,7 @@
import { Box } from '@/ui/Box';
import { ReactNode } from 'react';
import { useSidebar } from '@/components/layout/SidebarContext';
interface AppShellBarProps {
position: 'top' | 'bottom';
@@ -11,22 +12,24 @@ interface AppShellBarProps {
export function AppShellBar({ position, children, sidebarOffset = true }: AppShellBarProps) {
const isTop = position === 'top';
const { isCollapsed } = useSidebar();
const leftClass = sidebarOffset
? (isCollapsed ? 'lg:left-20' : 'lg:left-64')
: 'left-0';
return (
<Box
as={isTop ? 'header' : 'footer'}
className={`
fixed ${isTop ? 'top-0' : 'bottom-0'} right-0 z-40
h-14
bg-base-black/70 backdrop-blur-xl
border-${isTop ? 'b' : 't'} border-outline-steel
bg-base-black/80 backdrop-blur-xl
${isTop ? 'border-b' : 'border-t'} border-white/10
flex items-center justify-between px-6
transition-all duration-200
transition-all duration-300 ease-in-out
left-0 ${leftClass}
`}
// Use style for responsive left offset to ensure it works
// We use a CSS variable or calc if possible, but here we rely on Tailwind classes via className if we could
// But since we need responsive logic that matches Layout, we'll use the Box props
left={sidebarOffset ? { base: 0, lg: 64 } : 0}
>
{children}
</Box>

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

@@ -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>
);
}

70
apps/website/components/layout/CommandModal.tsx Normal file
View File

@@ -0,0 +1,70 @@
'use client';
import { Modal } from '@/components/shared/Modal';
import { Box } from '@/ui/Box';
import { Text } from '@/ui/Text';
import { Search, Command, ArrowRight } from 'lucide-react';
import { useState, useEffect } from 'react';
interface CommandModalProps {
isOpen: boolean;
onClose: () => void;
}
export function CommandModal({ isOpen, onClose }: CommandModalProps) {
const [query, setQuery] = useState('');
// Mock results
const results = [
{ label: 'Go to Dashboard', shortcut: 'G D' },
{ label: 'Find Driver...', shortcut: 'Cmd F' },
{ label: 'Create League', shortcut: 'C L' },
].filter(r => r.label.toLowerCase().includes(query.toLowerCase()));
return (
<Modal
isOpen={isOpen}
onClose={onClose}
title="Command Palette"
size="md"
icon={<Command size={20} />}
>
<Box className="flex flex-col gap-4">
<Box className="relative">
<Search className="absolute left-3 top-1/2 -translate-y-1/2 text-text-low" size={16} />
<input
autoFocus
type="text"
placeholder="Type a command or search..."
className="w-full bg-surface-charcoal border border-outline-steel rounded-md pl-10 pr-4 py-3 text-text-high placeholder:text-text-low focus:border-primary-accent focus:outline-none transition-colors"
value={query}
onChange={(e) => setQuery(e.target.value)}
/>
</Box>
<Box className="flex flex-col gap-1">
<Text size="xs" className="text-text-low font-mono uppercase tracking-wider px-2 mb-1">
Suggestions
</Text>
{results.map((result, i) => (
<button
key={i}
className="flex items-center justify-between px-3 py-2 rounded-md hover:bg-white/5 text-left group transition-colors"
onClick={onClose}
>
<Text size="sm" className="text-text-med group-hover:text-text-high">
{result.label}
</Text>
<Box className="flex items-center gap-2">
<Text size="xs" className="text-text-low font-mono bg-white/5 px-1.5 py-0.5 rounded">
{result.shortcut}
</Text>
<ArrowRight size={14} className="text-text-low opacity-0 group-hover:opacity-100 transition-opacity" />
</Box>
</button>
))}
</Box>
</Box>
</Modal>
);
}

48
apps/website/components/layout/SidebarContext.tsx Normal file
View File

@@ -0,0 +1,48 @@
'use client';
import React, { createContext, useContext, useState, useEffect } from 'react';
interface SidebarContextType {
isCollapsed: boolean;
toggleCollapse: () => void;
setCollapsed: (collapsed: boolean) => void;
}
const SidebarContext = createContext<SidebarContextType | undefined>(undefined);
export function SidebarProvider({ children }: { children: React.ReactNode }) {
const [isCollapsed, setIsCollapsed] = useState(false);
// Persist state (optional, but good for UX)
useEffect(() => {
const stored = localStorage.getItem('sidebar-collapsed');
if (stored) setIsCollapsed(stored === 'true');
}, []);
const toggleCollapse = () => {
setIsCollapsed((prev) => {
const next = !prev;
localStorage.setItem('sidebar-collapsed', String(next));
return next;
});
};
const setCollapsed = (collapsed: boolean) => {
setIsCollapsed(collapsed);
localStorage.setItem('sidebar-collapsed', String(collapsed));
};
return (
<SidebarContext.Provider value={{ isCollapsed, toggleCollapse, setCollapsed }}>
{children}
</SidebarContext.Provider>
);
}
export function useSidebar() {
const context = useContext(SidebarContext);
if (context === undefined) {
throw new Error('useSidebar must be used within a SidebarProvider');
}
return context;
}

26
apps/website/components/profile/UserPill.tsx
View File

@@ -147,20 +147,18 @@ export function UserPill() {
// Handle unauthenticated users
if (!session) {
return (
<Group gap={2}>
<Link
href={routes.auth.login}
variant="secondary"
>
Sign In
</Link>
<Link
href={routes.auth.signup}
variant="primary"
>
Get Started
</Link>
</Group>
<Link
href={routes.auth.login}
variant="inherit"
className="group flex items-center gap-2 bg-white/5 hover:bg-white/10 border border-white/10 rounded-full pl-4 pr-2 py-1.5 transition-all duration-300 hover:border-primary-accent/50"
>
<Text size="sm" weight="medium" className="text-text-med group-hover:text-text-high">
Enter GridPilot
</Text>
<Box className="w-6 h-6 rounded-full bg-primary-accent flex items-center justify-center text-white shadow-lg shadow-primary-accent/20 group-hover:scale-110 transition-transform">
<Icon icon={ChevronDown} size={3.5} className="-rotate-90" />
</Box>
</Link>
);
}

35
apps/website/templates/layout/RootAppShellTemplate.tsx
View File

@@ -5,6 +5,7 @@ import { AppHeader } from '@/components/layout/AppHeader';
import { AppSidebar } from '@/components/layout/AppSidebar';
import { Layout } from '@/ui/Layout';
import { Box } from '@/ui/Box';
import { SidebarProvider } from '@/components/layout/SidebarContext';
import React from 'react';
export interface RootAppShellViewData {
@@ -17,22 +18,24 @@ export interface RootAppShellViewData {
*/
export function RootAppShellTemplate({ children }: RootAppShellViewData) {
return (
<Layout
header={<AppHeader />}
sidebar={<AppSidebar />}
footer={<AppFooter />}
fixedHeader={true}
fixedSidebar={true}
fixedFooter={false}
>
<Box
width="full"
className="max-w-[1920px] mx-auto"
px={8}
py={8}
<SidebarProvider>
<Layout
header={<AppHeader />}
sidebar={<AppSidebar />}
footer={<AppFooter />}
fixedHeader={true}
fixedSidebar={true}
fixedFooter={true}
>
{children}
</Box>
</Layout>
<Box
width="full"
className="max-w-[1920px] mx-auto"
px={8}
py={8}
>
{children}
</Box>
</Layout>
</SidebarProvider>
);
}

18
apps/website/ui/BrandMark.tsx
View File

@@ -1,26 +1,22 @@
import { Box } from '@/ui/Box';
import { Link } from '@/ui/Link';
import { Image } from '@/ui/Image';
import { Link } from '@/ui/Link';
interface BrandMarkProps {
href?: string;
priority?: boolean;
variant?: 'dark' | 'light';
collapsed?: boolean;
}
export function BrandMark({ href = '/' }: BrandMarkProps) {
export function BrandMark({ href = '/', collapsed = false }: BrandMarkProps) {
return (
<Link href={href} variant="inherit" underline="none">
<Box display="flex" alignItems="center" gap={2}>
<Box display="flex" alignItems="center" justifyContent={collapsed ? 'center' : 'start'}>
<Image
src="/images/logos/square-logo-dark.svg"
alt=""
style={{ height: '1.5rem', width: 'auto' }}
/>
<Image
src="/images/logos/wordmark-rectangle-dark.svg"
src="/images/logos/icon-square-dark.svg"
alt="GridPilot"
style={{ height: '1.125rem', width: 'auto' }}
style={{ height: '3rem', width: 'auto' }}
/>
</Box>
</Link>

18
apps/website/ui/Layout.tsx
View File

@@ -1,5 +1,6 @@
import { ReactNode } from 'react';
import { Box } from './Box';
import { Box } from '@/ui/Box';
import { useSidebar } from '@/components/layout/SidebarContext';
export interface LayoutProps {
children: ReactNode;
@@ -22,22 +23,27 @@ export const Layout = ({
sidebar,
fixedSidebar = true,
fixedHeader = true,
fixedFooter = true // Default to true for AppShellBar
fixedFooter = true
}: LayoutProps) => {
const { isCollapsed } = useSidebar();
const sidebarWidth = isCollapsed ? '20' : '64'; // 5rem vs 16rem
const sidebarWidthClass = isCollapsed ? 'lg:w-20' : 'lg:w-64';
const contentMarginClass = isCollapsed ? 'lg:ml-20' : 'lg:ml-64';
return (
<Box display="flex" minHeight="100vh" className="bg-base-black text-text-high">
{/* Sidebar - Primary Vertical Axis - Solid Background */}
{sidebar && (
<Box
as="aside"
width="64" // 16rem / 256px
width={sidebarWidth}
display={{ base: 'none', lg: 'block' }}
position={fixedSidebar ? "fixed" : "relative"}
top={0}
bottom={0}
left={0}
zIndex={50}
className="bg-base-black border-r border-outline-steel"
style={{ zIndex: 60, width: isCollapsed ? '5rem' : '16rem' }} // Explicit style for width transition
className={`bg-base-black border-r border-outline-steel transition-all duration-300 ease-in-out`}
>
{sidebar}
</Box>
@@ -48,7 +54,7 @@ export const Layout = ({
display="flex"
flexDirection="col"
flex={1}
marginLeft={fixedSidebar && sidebar ? { lg: 64 } : undefined}
className={`transition-all duration-300 ease-in-out ${fixedSidebar && sidebar ? contentMarginClass : ''}`}
minWidth="0" // Prevent flex child overflow
>
{/* Header - Rendered directly as it contains AppShellBar (fixed) */}

80
apps/website/ui/NavLink.tsx
View File

@@ -1,8 +1,8 @@
import { Box } from '@/ui/Box';
import { Icon } from '@/ui/Icon';
import { Link } from '@/ui/Link';
import Link from 'next/link';
import { Text } from '@/ui/Text';
import { LucideIcon } from 'lucide-react';
import { LucideIcon, ChevronRight } from 'lucide-react';
interface NavLinkProps {
href: string;
@@ -10,58 +10,72 @@ interface NavLinkProps {
icon?: LucideIcon;
isActive?: boolean;
variant?: 'sidebar' | 'top';
collapsed?: boolean;
}
export function NavLink({ href, label, icon, isActive, variant = 'sidebar' }: NavLinkProps) {
export function NavLink({ href, label, icon, isActive, variant = 'sidebar', collapsed = false }: NavLinkProps) {
const isTop = variant === 'top';
// Dieter Rams style: Unobtrusive, Honest, Thorough.
// No glows. No shadows. Just clear contrast and alignment.
// Radical "Game Menu" Style
// Active: Solid Primary Color, Shadow, Bold.
// Inactive: Glass card with strong hover effects.
const content = (
<Box
display="flex"
alignItems="center"
gap={3}
paddingX={isTop ? 4 : 4}
paddingY={isTop ? 2 : 3}
justifyContent={collapsed ? 'center' : 'space-between'}
gap={collapsed ? 0 : 3}
paddingX={collapsed ? 2 : 4}
paddingY={3}
className={`
relative group transition-all duration-200 ease-out
relative transition-all duration-300 ease-out rounded-xl border w-full
${isActive
? 'text-text-high bg-white/5'
: 'text-text-med hover:text-text-high hover:bg-white/5'
? 'bg-primary-accent border-primary-accent shadow-[0_0_20px_rgba(25,140,255,0.3)]'
: 'bg-white/5 border-white/5 group-hover:bg-white/15 group-hover:border-white/20 group-hover:shadow-lg group-hover:shadow-white/5'
}
${!isTop && 'rounded-md mx-2'}
${!collapsed && isActive ? 'translate-x-2' : ''}
${!collapsed && !isActive ? 'group-hover:translate-x-2' : ''}
`}
title={collapsed ? label : undefined}
>
{icon && (
<Icon
icon={icon}
size={4}
className={`transition-colors duration-200 ${isActive ? 'text-primary-accent' : 'text-text-low group-hover:text-text-med'}`}
/>
)}
<Text
size="sm"
weight={isActive ? 'medium' : 'normal'}
variant="inherit"
className="tracking-wide"
>
{label}
</Text>
<Box display="flex" alignItems="center" gap={3} justifyContent={collapsed ? 'center' : 'start'} width={collapsed ? 'full' : 'auto'}>
{icon && (
<Icon
icon={icon}
size={5} // 20px
className={`transition-colors duration-200 ${isActive ? 'text-white' : 'text-text-med group-hover:text-white'}`}
/>
)}
{!collapsed && (
<Text
size="sm"
weight="bold"
variant="inherit"
className={`tracking-wide transition-colors duration-200 ${isActive ? 'text-white' : 'text-text-med group-hover:text-white'}`}
>
{label}
</Text>
)}
</Box>
{/* Minimal Active Indicator */}
{!isTop && isActive && (
<Box
className="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-4 bg-primary-accent rounded-r-full"
{/* Chevron on Hover/Active - Only when expanded */}
{!collapsed && (
<Icon
icon={ChevronRight}
size={4}
className={`transition-all duration-300 ${isActive ? 'text-white opacity-100' : 'text-white opacity-0 group-hover:opacity-100 -translate-x-4 group-hover:translate-x-0'}`}
/>
)}
</Box>
);
return (
<Link href={href} variant="inherit" underline="none" block={!isTop}>
<Link
href={href}
className={`w-full group block ${!isTop ? '' : ''}`}
>
{content}
</Link>
);