refactor(ui): restructure sidebar and admin navigation

- Sidebar: remove footer (user info, settings, locale switcher), remove admin section, make category headers static with per-category collapse toggle - Header dropdown: replace inline admin links with single "Administrator" entry - Admin section: dedicated layout with AdminSidebar (mirrors Settings pattern) at /admin/* - Disable self-delete button in user management (backend already rejects with 403) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-06-26 08:34:19 +02:00
parent 02652362f3
commit ba02b25cba
7 changed files with 229 additions and 104 deletions
@@ -0,0 +1,97 @@
+'use client';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { useTranslations } from 'next-intl';
+import { useAuthStore } from '@/lib/stores/auth-store';
+
+export function AdminSidebar() {
+  const t = useTranslations('header');
+  const pathname = usePathname();
+  const user = useAuthStore((s) => s.user);
+  const isSuperAdmin = user?.role === 'SUPER_ADMIN';
+
+  const items = [
+    {
+      label: t('admin.users'),
+      href: '/admin/users',
+      show: true,
+      icon: (
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
+          <circle cx="9" cy="7" r="4" />
+          <path d="M22 21v-2a4 4 0 0 0-3-3.87" />
+          <path d="M16 3.13a4 4 0 0 1 0 7.75" />
+        </svg>
+      ),
+    },
+    {
+      label: t('admin.tenants'),
+      href: '/admin/tenants',
+      show: isSuperAdmin,
+      icon: (
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
+          <polyline points="9 22 9 12 15 12 15 22" />
+        </svg>
+      ),
+    },
+    {
+      label: t('admin.modules'),
+      href: '/admin/modules',
+      show: true,
+      icon: (
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z" />
+          <polyline points="3.27 6.96 12 12.01 20.73 6.96" />
+          <line x1="12" y1="22.08" x2="12" y2="12" />
+        </svg>
+      ),
+    },
+    {
+      label: t('admin.ldap'),
+      href: '/admin/ldap',
+      show: true,
+      icon: (
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <path d="M12 2L2 7l10 5 10-5-10-5z" />
+          <path d="M2 17l10 5 10-5" />
+          <path d="M2 12l10 5 10-5" />
+        </svg>
+      ),
+    },
+  ];
+
+  return (
+    <aside
+      className="flex w-[220px] shrink-0 flex-col border-r border-sidebar-border bg-sidebar"
+      role="navigation"
+      aria-label={t('admin.label')}
+    >
+      <div className="p-4">
+        <h2 className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+          {t('admin.label')}
+        </h2>
+      </div>
+      <nav className="flex flex-col gap-1 px-3">
+        {items
+          .filter((item) => item.show)
+          .map((item) => (
+            <Link
+              key={item.href}
+              href={item.href}
+              className={`flex items-center gap-2 rounded-md px-2 py-1.5 text-sm transition-colors ${
+                pathname.startsWith(item.href)
+                  ? 'bg-sidebar-accent text-sidebar-accent-foreground font-medium'
+                  : 'text-sidebar-foreground hover:bg-muted'
+              }`}
+              aria-current={pathname.startsWith(item.href) ? 'page' : undefined}
+            >
+              {item.icon}
+              {item.label}
+            </Link>
+          ))}
+      </nav>
+    </aside>
+  );
+}