feat: combine mobile navigation and account menu

Replace the mobile profile card with a compact page header, account menu, and
contextual dashboard toolbar while preserving desktop behavior.

src/components/NavigationTabs.js

@@ -1,20 +1,26 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { Link, useLocation, useNavigate } from 'react-router-dom';
+import './NavigationTabs.css';
 
-const NavigationTabs = ({ isAdmin, onProtectedNavigate }) => {
+const NavigationTabs = ({ isAdmin, onProtectedNavigate, profileName, onLogout }) => {
   const location = useLocation();
   const navigate = useNavigate();
   const [mobileOpen, setMobileOpen] = useState(false);
 
-  const tabs = [
-    { to: '/', label: 'Slots buchen' },
-    { to: '/store-watch', label: 'Betriebs-Monitoring' },
-    { to: '/journal', label: 'Abhol-Journal' }
-  ];
-  if (isAdmin) {
-    tabs.push({ to: '/debug', label: 'Debug' });
-    tabs.push({ to: '/admin', label: 'Admin' });
-  }
+  const tabs = useMemo(() => {
+    const items = [
+      { to: '/', label: 'Slots buchen' },
+      { to: '/store-watch', label: 'Betriebs-Monitoring' },
+      { to: '/journal', label: 'Abhol-Journal' }
+    ];
+    if (isAdmin) {
+      items.push({ to: '/debug', label: 'Debug' });
+      items.push({ to: '/admin', label: 'Admin' });
+    }
+    return items;
+  }, [isAdmin]);
+
+  const activeTab = tabs.find((tab) => tab.to === location.pathname) || tabs[0];
 
   const handleClick = (event, to) => {
     event.preventDefault();
@@ -34,50 +40,34 @@ const NavigationTabs = ({ isAdmin, onProtectedNavigate }) => {
     setMobileOpen(false);
   }, [location.pathname]);
 
-  const renderLink = (tab, className, options = {}) => {
+  const renderLink = (tab, className) => {
     const isActive = location.pathname === tab.to;
-    const combinedClassName = typeof className === 'function' ? className(isActive) : className;
     return (
       <Link
         key={tab.to}
         to={tab.to}
         onClick={(event) => handleClick(event, tab.to)}
-        className={combinedClassName}
+        className={`${className}${isActive ? ' is-active' : ''}`}
         aria-current={isActive ? 'page' : undefined}
       >
-        <span className="relative z-10">{tab.label}</span>
-        {options.showUnderline ? (
-          <span
-            className={`absolute inset-x-3 -bottom-1 h-0.5 rounded-full transition-all ${
-              isActive ? 'bg-blue-500 opacity-100' : 'bg-blue-200 opacity-0 group-hover:opacity-60'
-            }`}
-          />
-        ) : null}
+        {tab.label}
       </Link>
     );
   };
 
   return (
-    <nav className="mb-4" aria-label="Navigation">
-      <div className="flex items-center justify-between sm:hidden">
-        <span className="text-sm font-semibold text-gray-600">Navigation</span>
+    <nav className="app-navigation" aria-label="Navigation">
+      <div className="app-navigation__mobile-header">
+        <span className="app-navigation__current-page">{activeTab.label}</span>
         <button
           type="button"
-          className="inline-flex items-center justify-center rounded-md border border-gray-300 bg-white px-3 py-2 text-gray-700 shadow-sm"
+          className="app-navigation__menu-toggle"
+          aria-label={mobileOpen ? 'Navigation schließen' : 'Navigation öffnen'}
           aria-expanded={mobileOpen}
           aria-controls="mobile-navigation"
           onClick={() => setMobileOpen((open) => !open)}
         >
-          <svg
-            className="h-5 w-5"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-            fill="none"
-            strokeWidth="2"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            aria-hidden="true"
-          >
+          <svg viewBox="0 0 24 24" stroke="currentColor" fill="none" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
             {mobileOpen ? (
               <>
                 <line x1="18" y1="6" x2="6" y2="18" />
@@ -93,35 +83,24 @@ const NavigationTabs = ({ isAdmin, onProtectedNavigate }) => {
           </svg>
         </button>
       </div>
-      <div
-        id="mobile-navigation"
-        className={`mt-3 flex flex-col gap-2 sm:hidden ${mobileOpen ? '' : 'hidden'}`}
-      >
-        {tabs.map((tab) =>
-          renderLink(
-            tab,
-            (isActive) =>
-              `px-4 py-3 rounded-md border text-left transition-colors ${
-                isActive
-                  ? 'bg-blue-500 text-white border-blue-600'
-                  : 'bg-white text-gray-700 border-gray-300 hover:border-blue-400'
-              }`
-          )
-        )}
-      </div>
-      <div className="hidden items-center gap-6 rounded-xl border border-gray-200 bg-white/80 px-3 py-2 shadow-sm sm:flex">
-        {tabs.map((tab) =>
-          renderLink(
-            tab,
-            (isActive) =>
-              `group relative rounded-md px-2 pb-2 pt-1 text-sm font-semibold tracking-tight transition-colors ${
-                isActive
-                  ? 'text-blue-600 bg-blue-50/70'
-                  : 'text-gray-600 hover:bg-gray-100/80 hover:text-gray-900'
-              }`,
-            { showUnderline: true }
-          )
-        )}
+
+      {mobileOpen && (
+        <div id="mobile-navigation" className="app-navigation__mobile-menu">
+          <div className="app-navigation__mobile-links">
+            {tabs.map((tab) => renderLink(tab, 'app-navigation__mobile-link'))}
+          </div>
+          <div className="app-navigation__account">
+            <div>
+              <span>Angemeldet</span>
+              <strong>{profileName || 'Profil'}</strong>
+            </div>
+            <button type="button" onClick={onLogout}>Logout</button>
+          </div>
+        </div>
+      )}
+
+      <div className="app-navigation__desktop">
+        {tabs.map((tab) => renderLink(tab, 'app-navigation__desktop-link'))}
       </div>
     </nav>
   );