aktueller stand

src/components/NavigationTabs.js

@@ -1,8 +1,10 @@
+import { useEffect, useState } from 'react';
 import { Link, useLocation, useNavigate } from 'react-router-dom';
 
 const NavigationTabs = ({ isAdmin, onProtectedNavigate }) => {
   const location = useLocation();
   const navigate = useNavigate();
+  const [mobileOpen, setMobileOpen] = useState(false);
 
   const tabs = [
     { to: '/', label: 'Slots buchen' },
@@ -28,25 +30,99 @@ const NavigationTabs = ({ isAdmin, onProtectedNavigate }) => {
     proceed();
   };
 
-  return (
-    <nav className="mb-4 flex gap-2" aria-label="Navigation">
-      {tabs.map((tab) => {
-        const isActive = location.pathname === tab.to;
-        return (
-          <Link
-            key={tab.to}
-            to={tab.to}
-            onClick={(event) => handleClick(event, tab.to)}
-            className={`px-4 py-2 rounded-md border transition-colors ${
-              isActive
-                ? 'bg-blue-500 text-white border-blue-600'
-                : 'bg-white text-gray-700 border-gray-300 hover:border-blue-400'
+  useEffect(() => {
+    setMobileOpen(false);
+  }, [location.pathname]);
+
+  const renderLink = (tab, className, options = {}) => {
+    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}
+        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}
+      </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>
+        <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"
+          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"
           >
-            {tab.label}
-          </Link>
-        );
-      })}
+            {mobileOpen ? (
+              <>
+                <line x1="18" y1="6" x2="6" y2="18" />
+                <line x1="6" y1="6" x2="18" y2="18" />
+              </>
+            ) : (
+              <>
+                <line x1="3" y1="6" x2="21" y2="6" />
+                <line x1="3" y1="12" x2="21" y2="12" />
+                <line x1="3" y1="18" x2="21" y2="18" />
+              </>
+            )}
+          </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 }
+          )
+        )}
+      </div>
     </nav>
   );
 };