From c0ae12185a070e3d52c84af8d719b437f529a649 Mon Sep 17 00:00:00 2001
From: Theis Gaedigk <theis.gaedigk@icloud.com>
Date: Wed, 3 Sep 2025 14:52:36 +0200
Subject: [PATCH] redesgined header

---
 frontend/src/components/Header.tsx | 53 ++++++++++++++++++------------
 1 file changed, 32 insertions(+), 21 deletions(-)

diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx
index 8348128..903786c 100644
--- a/frontend/src/components/Header.tsx
+++ b/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"
-          onClick={onLogout}
-          className="h-9 px-3 rounded-md border border-slate-300 text-slate-700 hover:bg-slate-100 transition"
+
+        <nav
+          aria-label="Aktionen"
+          className="flex flex-wrap items-center gap-2"
         >
-          Logout
-        </button>
-        <a href="https://git.the1s.de/Matthias-Claudius-Schule/borrow-system/src/branch/dev/Docs/HELP.md">
-          <button className="h-9 px-3 rounded-md border border-slate-300 text-slate-700 hover:bg-slate-100 transition">
+          <a
+            href="https://git.the1s.de/Matthias-Claudius-Schule/borrow-system/src/branch/dev/Docs/HELP.md"
+            target="_blank"
+            rel="noreferrer"
+            className={btn}
+          >
             Hilfe
-          </button>
-        </a>
-        <a 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">
+          </a>
+          <a
+            href="https://git.the1s.de/Matthias-Claudius-Schule/borrow-system"
+            target="_blank"
+            rel="noreferrer"
+            className={btn}
+          >
             Source Code
+          </a>
+          <button type="button" onClick={passwordForm} className={btn}>
+            Passwort ändern
           </button>
-        </a>
-        <button
-          type="button"
-          onClick={passwordForm}
-          className="h-9 px-3 rounded-md border border-slate-300 text-slate-700 hover:bg-slate-100 transition"
-        >
-          Passwort ändern
-        </button>
+          <button
+            type="button"
+            onClick={onLogout}
+            className={`${btn} border-rose-300 hover:bg-rose-50`}
+          >
+            Logout
+          </button>
+        </nav>
       </div>
     </header>
   );