From cf838ee9b16f524061517d7e79cdec666e620134 Mon Sep 17 00:00:00 2001
From: Nirodan <nirodan.production@gmail.com>
Date: Mon, 7 Jul 2025 11:50:21 +0200
Subject: [PATCH] Logout Button Fix immer noch zu weit rechts gewesen

---
 frontend/src/components/NavBar.jsx | 22 ++++++++++------------
 frontend/src/css/navBar.css        | 23 +++++++++++++----------
 2 files changed, 23 insertions(+), 22 deletions(-)

diff --git a/frontend/src/components/NavBar.jsx b/frontend/src/components/NavBar.jsx
index d4dc927..3d3af0e 100644
--- a/frontend/src/components/NavBar.jsx
+++ b/frontend/src/components/NavBar.jsx
@@ -1,25 +1,23 @@
-import { useNavigate } from 'react-router-dom';
+import { Link } from 'react-router-dom'; // ← das hat gefehlt
 import '../css/navbar.css';
 import LightDarkToggle from './LightDarkToggle';
 import LogoutButton from './LogoutButton';
 
 function NavBar() {
-  const navigate = useNavigate();
   const isLoggedIn = localStorage.getItem('token') !== null;
 
   return (
     <nav className="navbar">
-      <div className="navbar-left">
-        <button onClick={() => navigate('/')}>🏠 Home</button>
-      </div>
-      <div className="navbar-right">
-        {isLoggedIn && (
-          <>
-            <LightDarkToggle />
-            <LogoutButton />
-          </>
-        )}
+      <div className="nav-left">
+        <Link to="/" className="nav-button">🏠 Home</Link>
       </div>
+
+      {isLoggedIn && (
+        <div className="nav-right">
+          <LightDarkToggle />
+          <LogoutButton />
+        </div>
+      )}
     </nav>
   );
 }
diff --git a/frontend/src/css/navBar.css b/frontend/src/css/navBar.css
index af67769..17b89d8 100644
--- a/frontend/src/css/navBar.css
+++ b/frontend/src/css/navBar.css
@@ -1,21 +1,24 @@
 .navbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 20px;
+  background-color: var(--background-color);
+  color: var(--text-color);
   position: fixed;
   top: 0;
-  width: 100%;
+  left: 0;
+  right: 0;
   height: 60px;
-  background-color: var(--navbar-bg);
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 20px; /* vorher evtl. nur 10px oder weniger */
-  z-index: 1000;
+  z-index: 999;
 }
 
-.navbar-left,
-.navbar-right {
+/* Wenn du Elemente gruppieren willst */
+.nav-left,
+.nav-right {
   display: flex;
   align-items: center;
-  gap: 20px;
+  gap: 10px;
 }
 
 .navbar a,