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,41 @@
+'use client';
+
+import Link from 'next/link';
+import { useTranslations } from 'next-intl';
+import { AdminSidebar } from '@/components/admin/admin-sidebar';
+
+export default function AdminLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const t = useTranslations('settings');
+
+  return (
+    <div className="flex h-full">
+      <AdminSidebar />
+      <div className="flex-1 overflow-y-auto p-6">
+        <Link
+          href="/"
+          className="mb-4 inline-flex items-center gap-1 text-sm text-muted-foreground transition-colors hover:text-foreground"
+        >
+          <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"
+          >
+            <polyline points="15 18 9 12 15 6" />
+          </svg>
+          {t('backToDashboard')}
+        </Link>
+        {children}
+      </div>
+    </div>
+  );
+}
@@ -253,7 +253,8 @@ export default function AdminUsersPage() {
                      </button>
                      <button
                        onClick={() => setDeleteConfirm(user.id)}
-                        className="rounded px-2 py-1 text-xs text-destructive hover:bg-destructive/10 transition-colors"
+                        disabled={user.id === currentUser?.id}
+                        className="rounded px-2 py-1 text-xs text-destructive hover:bg-destructive/10 transition-colors disabled:opacity-30 disabled:cursor-not-allowed disabled:pointer-events-none"
                      >
                        {tCommon('delete')}
                      </button>
@@ -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>
+  );
+}
@@ -7,6 +7,7 @@ import { useSidebarStore } from '@/lib/stores/sidebar-store';
 import { useAuthStore } from '@/lib/stores/auth-store';
 import { fetchCurrentUser, logout } from '@/lib/auth-actions';
 import { ThemeToggle } from '@/components/theme-toggle';
+import { usePathname } from 'next/navigation';

 export function Header() {
  const t = useTranslations();
@@ -15,6 +16,9 @@ export function Header() {
  const { user, setUser } = useAuthStore();
  const [dropdownOpen, setDropdownOpen] = useState(false);
  const dropdownRef = useRef<HTMLDivElement>(null);
+  const pathname = usePathname();
+
+  const isAdmin = user?.role === 'ADMIN' || user?.role === 'SUPER_ADMIN';

  // Fetch current user on mount to populate auth store
  useEffect(() => {
@@ -154,7 +158,28 @@ export function Header() {
                </Link>
              </div>

+              {/* Administration link */}
+              {isAdmin && (
+                <div className="px-2 py-1">
+                  <Link
+                    href="/admin/users"
+                    onClick={() => setDropdownOpen(false)}
+                    className={`flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-sm transition-colors ${
+                      pathname.startsWith('/admin')
+                        ? 'bg-muted text-foreground font-medium'
+                        : 'text-foreground hover:bg-muted'
+                    }`}
+                  >
+                    <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 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" />
+                    </svg>
+                    {tHeader('admin.label')}
+                  </Link>
+                </div>
+              )}
+
              {/* Logout button */}
+              <div className="border-t border-border my-1" />
              <div className="px-2 py-1">
                <button
                  onClick={() => {
@@ -5,9 +5,7 @@ import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import { useTranslations } from 'next-intl';
 import { useSidebarStore } from '@/lib/stores/sidebar-store';
-import { useAuthStore } from '@/lib/stores/auth-store';
 import { useMarketplaceStore } from '@/lib/stores/marketplace-store';
-import { SidebarFooter } from '@/components/layout/sidebar-footer';
 import { SidebarSearch } from '@/components/layout/sidebar-search';

 const API_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3001';
@@ -23,10 +21,9 @@ export function Sidebar() {
  const t = useTranslations('sidebar');
  const tCommon = useTranslations('common');
  const { isCollapsed, isMobileOpen, toggle, setMobileOpen } = useSidebarStore();
-  const [categoriesOpen, setCategoriesOpen] = useState(true);
  const [activeModules, setActiveModules] = useState<SidebarModule[]>([]);
  const [searchQuery, setSearchQuery] = useState('');
-  const user = useAuthStore((s) => s.user);
+  const [openCategories, setOpenCategories] = useState<Set<string>>(new Set());
  const pathname = usePathname();
  const sidebarRefreshKey = useMarketplaceStore((s) => s.sidebarRefreshKey);

@@ -59,8 +56,14 @@ export function Sidebar() {
    fetchActiveModules();
  }, [fetchActiveModules, sidebarRefreshKey]);

-  const isAdmin = user?.role === 'ADMIN' || user?.role === 'SUPER_ADMIN';
-  const isSuperAdmin = user?.role === 'SUPER_ADMIN';
+  const toggleCategory = (cat: string) => {
+    setOpenCategories((prev) => {
+      const next = new Set(prev);
+      if (next.has(cat)) next.delete(cat);
+      else next.add(cat);
+      return next;
+    });
+  };

  const filteredCategories = useMemo(() => {
    const categories = new Map<string, SidebarModule[]>();
@@ -119,43 +122,42 @@ export function Sidebar() {
            </div>

            <div className="mt-2">
-              <button
-                onClick={() => setCategoriesOpen(!categoriesOpen)}
-                className="flex w-full items-center justify-between rounded-md px-2 py-2 text-xs font-semibold uppercase tracking-wider text-muted-foreground hover:text-foreground transition-colors"
-              >
-                <span>{t('categories.label')}</span>
-                <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={`transition-transform duration-200 ${categoriesOpen ? 'rotate-180' : ''}`}>
-                  <polyline points="6 9 12 15 18 9" />
-                </svg>
-              </button>
-              {categoriesOpen && (
-                <div className="mt-1">
-                  {activeModules.length === 0 ? (
-                    <div className="px-2 py-2 text-sm text-muted-foreground">
-                      {t('categories.empty')}
-                    </div>
-                  ) : filteredCategories.length === 0 ? (
-                    <div className="px-2 py-2 text-sm text-muted-foreground">
-                      {t('noResults')}
-                    </div>
-                  ) : (
-                    <ul className="flex flex-col gap-1">
-                      {filteredCategories.map(([category, mods]) => (
-                        <li key={category}>
-                          <Link
-                            href={`/modules/${category}`}
-                            className={`flex items-center gap-2 rounded-md px-2 py-1.5 text-xs font-medium transition-colors ${
-                              isActive(`/modules/${category}`)
-                                ? 'bg-sidebar-accent text-sidebar-accent-foreground'
-                                : 'text-muted-foreground hover:bg-muted hover:text-foreground'
-                            }`}
-                          >
-                            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="shrink-0">
-                              <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" />
+              <div className="px-2 py-2 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+                {t('categories.label')}
+              </div>
+              <div className="mt-1">
+                {activeModules.length === 0 ? (
+                  <div className="px-2 py-2 text-sm text-muted-foreground">
+                    {t('categories.empty')}
+                  </div>
+                ) : filteredCategories.length === 0 ? (
+                  <div className="px-2 py-2 text-sm text-muted-foreground">
+                    {t('noResults')}
+                  </div>
+                ) : (
+                  <ul className="flex flex-col gap-1">
+                    {filteredCategories.map(([category, mods]) => (
+                      <li key={category}>
+                        <button
+                          onClick={() => toggleCategory(category)}
+                          className={`flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-xs font-medium transition-colors ${
+                            isActive(`/modules/${category}`)
+                              ? 'bg-sidebar-accent text-sidebar-accent-foreground'
+                              : 'text-muted-foreground hover:bg-muted hover:text-foreground'
+                          }`}
+                        >
+                          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="shrink-0">
+                            <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" />
+                          </svg>
+                          <span className="capitalize">{category.replace(/-/g, ' ')}</span>
+                          <span className="ml-auto flex items-center gap-1.5">
+                            <span className="text-[10px] text-muted-foreground/60">{mods.length}</span>
+                            <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={`transition-transform duration-200 ${openCategories.has(category) ? 'rotate-180' : ''}`}>
+                              <polyline points="6 9 12 15 18 9" />
                            </svg>
-                            <span className="capitalize">{category.replace(/-/g, ' ')}</span>
-                            <span className="ml-auto text-[10px] text-muted-foreground/60">{mods.length}</span>
-                          </Link>
+                          </span>
+                        </button>
+                        {openCategories.has(category) && (
                          <ul className="ml-5 flex flex-col gap-0.5">
                            {mods.map((mod) => (
                              <li key={mod.id}>
@@ -172,69 +174,15 @@ export function Sidebar() {
                              </li>
                            ))}
                          </ul>
-                        </li>
-                      ))}
-                    </ul>
-                  )}
-                </div>
-              )}
+                        )}
+                      </li>
+                    ))}
+                  </ul>
+                )}
+              </div>
            </div>
          </>
        )}
-
-        {isAdmin && (
-          <div className="mt-6">
-            {!isCollapsed && (
-              <div className="px-2 py-2 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
-                {t('admin')}
-              </div>
-            )}
-            <ul className="flex flex-col gap-1">
-              <li>
-                <Link href="/admin/users" className={linkClass('/admin/users')}>
-                  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="shrink-0">
-                    <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>
-                  {!isCollapsed && <span className="truncate">{t('users')}</span>}
-                </Link>
-              </li>
-              {isSuperAdmin && (
-                <li>
-                  <Link href="/admin/tenants" className={linkClass('/admin/tenants')}>
-                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="shrink-0">
-                      <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>
-                    {!isCollapsed && <span className="truncate">{t('tenants')}</span>}
-                  </Link>
-                </li>
-              )}
-              <li>
-                <Link href="/admin/modules" className={linkClass('/admin/modules')}>
-                  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="shrink-0">
-                    <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>
-                  {!isCollapsed && <span className="truncate">{t('modules')}</span>}
-                </Link>
-              </li>
-              <li>
-                <Link href="/admin/ldap" className={linkClass('/admin/ldap')}>
-                  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="shrink-0">
-                    <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>
-                  {!isCollapsed && <span className="truncate">{t('ldap')}</span>}
-                </Link>
-              </li>
-            </ul>
-          </div>
-        )}
      </nav>

      <div className="hidden md:block border-t border-sidebar-border p-2">
@@ -250,7 +198,6 @@ export function Sidebar() {
        </button>
      </div>

-      <SidebarFooter />
    </div>
  );

@@ -69,6 +69,13 @@
    },
    "settings": "Einstellungen",
    "logout": "Abmelden",
+    "admin": {
+      "label": "Administrator",
+      "users": "Benutzer",
+      "tenants": "Mandanten",
+      "modules": "Module",
+      "ldap": "LDAP"
+    },
    "role": {
      "SUPER_ADMIN": "Super-Admin",
      "ADMIN": "Admin",
@@ -69,6 +69,13 @@
    },
    "settings": "Settings",
    "logout": "Sign Out",
+    "admin": {
+      "label": "Administration",
+      "users": "Users",
+      "tenants": "Tenants",
+      "modules": "Modules",
+      "ldap": "LDAP"
+    },
    "role": {
      "SUPER_ADMIN": "Super Admin",
      "ADMIN": "Admin",