redesgined header

frontend/src/components/Header.tsx

@@ -22,9 +22,12 @@ const Header: React.FC<HeaderProps> = ({ onLogout }) => {
     }
   };
 
+  const btn =
+    "inline-flex items-center h-9 px-3 rounded-md text-sm font-medium border border-slate-300 bg-white text-slate-700 hover:bg-slate-100 active:bg-slate-200 transition focus:outline-none focus:ring-2 focus:ring-slate-400/50";
+
   return (
     <header className="mb-4 sm:mb-6">
-      <div className="flex items-start justify-between gap-3">
+      <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
         <div className="min-w-0">
           <h1 className="text-2xl sm:text-3xl font-extrabold text-slate-900 tracking-tight">
             Gegenstand ausleihen
@@ -33,30 +36,38 @@ const Header: React.FC<HeaderProps> = ({ onLogout }) => {
             Schnell und unkompliziert Equipment reservieren
           </p>
         </div>
-        <button
+
-          type="button"
+        <nav
-          onClick={onLogout}
+          aria-label="Aktionen"
-          className="h-9 px-3 rounded-md border border-slate-300 text-slate-700 hover:bg-slate-100 transition"
+          className="flex flex-wrap items-center gap-2"
         >
-          Logout
+          <a
-        </button>
+            href="https://git.the1s.de/Matthias-Claudius-Schule/borrow-system/src/branch/dev/Docs/HELP.md"
-        <a href="https://git.the1s.de/Matthias-Claudius-Schule/borrow-system/src/branch/dev/Docs/HELP.md">
+            target="_blank"
-          <button className="h-9 px-3 rounded-md border border-slate-300 text-slate-700 hover:bg-slate-100 transition">
+            rel="noreferrer"
+            className={btn}
+          >
             Hilfe
-          </button>
+          </a>
-        </a>
+          <a
-        <a href="https://git.the1s.de/Matthias-Claudius-Schule/borrow-system">
+            href="https://git.the1s.de/Matthias-Claudius-Schule/borrow-system"
-          <button className="h-9 px-3 rounded-md border border-slate-300 text-slate-700 hover:bg-slate-100 transition">
+            target="_blank"
+            rel="noreferrer"
+            className={btn}
+          >
             Source Code
+          </a>
+          <button type="button" onClick={passwordForm} className={btn}>
+            Passwort ändern
           </button>
-        </a>
+          <button
-        <button
+            type="button"
-          type="button"
+            onClick={onLogout}
-          onClick={passwordForm}
+            className={`${btn} border-rose-300 hover:bg-rose-50`}
-          className="h-9 px-3 rounded-md border border-slate-300 text-slate-700 hover:bg-slate-100 transition"
+          >
-        >
+            Logout
-          Passwort ändern
+          </button>
-        </button>
+        </nav>
       </div>
     </header>
   );