setMobileOpen(false)}
+ data-testid="mobile-overlay"
+ />
+ )}
+
+ {/* Sidebar */}
+
+
+ {/* Mobile spacer so content starts below header */}
+
+
+ );
+}
diff --git a/frontend/components/UserMenu.tsx b/frontend/components/UserMenu.tsx
new file mode 100644
index 0000000..d10621e
--- /dev/null
+++ b/frontend/components/UserMenu.tsx
@@ -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
(null);
+ const [open, setOpen] = useState(false);
+ const menuRef = useRef(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 (
+
+
+ {open && (
+
+
+
{t('nav.settings')}
+
{email || '—'}
+
+
+
+ )}
+