Adds front-end set-up

2026-06-20 17:04:17 +02:00
parent efd1569c26
commit 7dfc3a9692
62 changed files with 6875 additions and 3 deletions
@@ -0,0 +1,53 @@
+import { Link } from '@tanstack/react-router';
+import { useTranslation } from 'react-i18next';
+import { LayoutDashboard, Users, FileText } from 'lucide-react';
+import type { LucideIcon } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+interface NavItem {
+    to: string;
+    labelKey: string;
+    icon: LucideIcon;
+    testId: string;
+}
+
+const NAV_ITEMS: NavItem[] = [
+    { to: '/dashboard', labelKey: 'nav.dashboard', icon: LayoutDashboard, testId: 'nav-dashboard' },
+    { to: '/users', labelKey: 'nav.users', icon: Users, testId: 'nav-users' },
+    { to: '/cms', labelKey: 'nav.cms', icon: FileText, testId: 'nav-cms' },
+];
+
+export function Sidebar() {
+    const { t } = useTranslation();
+
+    return (
+        <aside
+            className="hidden w-64 shrink-0 border-r border-border bg-card md:flex md:flex-col"
+            data-testid="app-sidebar"
+        >
+            <div className="flex h-16 items-center gap-2 border-b border-border px-6">
+                <span className="h-3 w-3 rounded-full bg-primary" aria-hidden="true" />
+                <span className="text-lg font-semibold">{t('common.appName')}</span>
+            </div>
+            <nav className="flex-1 space-y-1 p-3">
+                {NAV_ITEMS.map((item) => {
+                    const Icon = item.icon;
+                    return (
+                        <Link
+                            key={item.to}
+                            to={item.to}
+                            data-testid={item.testId}
+                            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>
+        </aside>
+    );
+}