slp-modular-cms/frontend/src/components/layout/Sidebar.tsx

import { Link } from '@tanstack/react-router';
import { useTranslation } from 'react-i18next';
import { LayoutDashboard, Users, FileText, Settings, X } from 'lucide-react';
import type { LucideIcon } from 'lucide-react';
import { cn } from '@/lib/utils';
import { useAuth } from '@/contexts/auth-context';
import { LanguageSwitcher } from '@/i18n/LanguageSwitcher';
import { ThemeToggle } from './ThemeToggle';
import { UserMenu } from './UserMenu';

type Role = 'Owner' | 'Administrator' | 'User';

interface NavItem {
    to: string;
    labelKey: string;
    icon: LucideIcon;
    testId: string;
    roles?: Role[];
}

const NAV_ITEMS: NavItem[] = [
    { to: '/dashboard', labelKey: 'nav.dashboard', icon: LayoutDashboard, testId: 'nav-dashboard' },
    { to: '/users', labelKey: 'nav.users', icon: Users, testId: 'nav-users', roles: ['Owner', 'Administrator'] },
    { to: '/settings', labelKey: 'nav.settings', icon: Settings, testId: 'nav-settings', roles: ['Owner'] },
    { to: '/cms', labelKey: 'nav.cms', icon: FileText, testId: 'nav-cms', roles: ['Owner'] },
];

interface SidebarProps {
    onClose?: () => void;
}

export function Sidebar({ onClose }: SidebarProps = {}) {
    const { t } = useTranslation();
    const { user } = useAuth();

    const role = user?.role as Role | undefined;
    const visibleItems = NAV_ITEMS.filter(
        (item) => !item.roles || (role && item.roles.includes(role))
    );

    return (
        <aside
            className="flex w-64 shrink-0 flex-col border-r border-border bg-card"
            data-testid="app-sidebar"
        >
            <div className="flex h-16 items-center justify-between border-b border-border px-6">
                <div className="flex items-center gap-2">
                    <span className="h-3 w-3 rounded-full bg-primary" aria-hidden="true" />
                    <span className="text-lg font-semibold">{t('common.appName')}</span>
                </div>
                {onClose && (
                    <button
                        type="button"
                        onClick={onClose}
                        aria-label={t('nav.closeMenu')}
                        className="rounded-md p-1 text-muted-foreground hover:bg-accent hover:text-accent-foreground md:hidden"
                        data-testid="sidebar-close-button"
                    >
                        <X className="size-4" />
                    </button>
                )}
            </div>

            <nav className="flex-1 space-y-1 p-3">
                {visibleItems.map((item) => {
                    const Icon = item.icon;
                    return (
                        <Link
                            key={item.to}
                            to={item.to}
                            data-testid={item.testId}
                            onClick={onClose}
                            className="flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
                            activeProps={{
                                className: cn('bg-accent text-accent-foreground'),
                            }}
                        >
                            <Icon className="size-4" />
                            {t(item.labelKey)}
                        </Link>
                    );
                })}
            </nav>

            <div className="flex items-center gap-1 border-t border-border p-3">
                <div className="flex-1 min-w-0">
                    <UserMenu />
                </div>
                <LanguageSwitcher />
                <ThemeToggle />
            </div>
        </aside>
    );
}