feat(05-01): settings shell, header link, and i18n keys for dashboard phase

- Create settings/layout.tsx with SettingsSidebar and back-to-dashboard link - Create settings/page.tsx with redirect to /settings/dashboard - Create settings-sidebar.tsx with Widgets and Calendar nav items, aria-current - Add Settings link in header user dropdown (gear icon, before logout) - Add settings namespace (DE+EN) with all category and action keys - Add widgets namespace (DE+EN) with all widget names, descriptions, error states - Add header.settings key ("Einstellungen"/"Settings") Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-06-24 11:23:47 +02:00
parent d5e1c42e64
commit 8a9c1ae6a9
6 changed files with 231 additions and 0 deletions
@@ -0,0 +1,64 @@
+'use client';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { useTranslations } from 'next-intl';
+
+/**
+ * Settings sub-sidebar (D-19, D-20).
+ * Phase 05 categories: Dashboard > Widgets, Calendar.
+ * Active item uses sidebar-accent pattern with aria-current="page".
+ */
+export function SettingsSidebar() {
+  const t = useTranslations('settings');
+  const pathname = usePathname();
+
+  const items = [
+    {
+      label: t('categoryWidgets'),
+      href: '/settings/dashboard',
+    },
+    {
+      label: t('categoryCalendar'),
+      href: '/settings/dashboard/calendar',
+    },
+  ];
+
+  const isActive = (href: string) => {
+    if (href === '/settings/dashboard') {
+      // Active when exactly on /settings/dashboard (not on sub-routes like /calendar)
+      return pathname === '/settings/dashboard';
+    }
+    return pathname.startsWith(href);
+  };
+
+  return (
+    <aside
+      className="flex w-[220px] shrink-0 flex-col border-r border-sidebar-border bg-sidebar"
+      role="navigation"
+      aria-label={t('navLabel')}
+    >
+      <div className="p-4">
+        <h2 className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+          {t('categoryDashboard')}
+        </h2>
+      </div>
+      <nav className="flex flex-col gap-1 px-3">
+        {items.map((item) => (
+          <Link
+            key={item.href}
+            href={item.href}
+            className={`flex items-center rounded-md px-2 py-1.5 text-sm transition-colors ${
+              isActive(item.href)
+                ? 'bg-sidebar-accent text-sidebar-accent-foreground font-medium'
+                : 'text-sidebar-foreground hover:bg-muted'
+            }`}
+            aria-current={isActive(item.href) ? 'page' : undefined}
+          >
+            {item.label}
+          </Link>
+        ))}
+      </nav>
+    </aside>
+  );
+}