feat: add navigation layout with sidebar, header, auth guard, mobile responsive

2026-07-19 17:25:35 +02:00
parent 2242a12094
commit 5ae1e28ef2
5 changed files with 317 additions and 0 deletions
@@ -0,0 +1,92 @@
+'use client';
+
+import { useState, useEffect, useRef } from 'react';
+import { useRouter } from 'next/navigation';
+import { clearTokens } from '@/lib/api';
+import { useI18n } from '@/lib/i18n';
+
+/**
+ * Decodes the email from a JWT access token stored in localStorage.
+ * Returns null if no token is present or the payload cannot be parsed.
+ */
+function decodeEmailFromToken(token: string | null): string | null {
+  if (!token) return null;
+  const parts = token.split('.');
+  if (parts.length !== 3) return null;
+  try {
+    const payload = JSON.parse(atob(parts[1]));
+    return payload.email || payload.sub || null;
+  } catch {
+    return null;
+  }
+}
+
+export function UserMenu() {
+  const router = useRouter();
+  const { t } = useI18n();
+  const [email, setEmail] = useState<string | null>(null);
+  const [open, setOpen] = useState(false);
+  const menuRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const token = localStorage.getItem('access_token');
+    setEmail(decodeEmailFromToken(token));
+  }, []);
+
+  useEffect(() => {
+    function handleClickOutside(e: MouseEvent) {
+      if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
+        setOpen(false);
+      }
+    }
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  function handleLogout() {
+    clearTokens();
+    router.push('/login');
+  }
+
+  return (
+    <div className="relative" ref={menuRef} data-testid="user-menu">
+      <button
+        onClick={() => setOpen((v) => !v)}
+        className="flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-primary/10 transition-colors text-text"
+        aria-label={t('nav.logout')}
+        data-testid="user-menu-toggle"
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5 text-text-muted" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
+        </svg>
+        <span className="text-sm font-medium hidden sm:inline" data-testid="user-email">
+          {email || '—'}
+        </span>
+        <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 text-text-muted" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+        </svg>
+      </button>
+      {open && (
+        <div
+          className="absolute right-0 mt-2 w-56 bg-surface border border-border rounded-lg shadow-lg py-1 z-50"
+          data-testid="user-menu-dropdown"
+        >
+          <div className="px-4 py-2 border-b border-border">
+            <p className="text-xs text-text-muted">{t('nav.settings')}</p>
+            <p className="text-sm font-medium text-text truncate">{email || '—'}</p>
+          </div>
+          <button
+            onClick={handleLogout}
+            className="w-full text-left px-4 py-2 text-sm text-error hover:bg-error/10 transition-colors flex items-center gap-2"
+            data-testid="logout-button"
+          >
+            <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
+            </svg>
+            {t('nav.logout')}
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}