Logout Button Fix immer noch zu weit rechts gewesen

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">
+      <div className="nav-left">
-        <button onClick={() => navigate('/')}>🏠 Home</button>
+        <Link to="/" className="nav-button">🏠 Home</Link>
       </div>
-      <div className="navbar-right">
+
       {isLoggedIn && (
-          <>
+        <div className="nav-right">
           <LightDarkToggle />
           <LogoutButton />
-          </>
-        )}
         </div>
+      )}
     </nav>
   );
 }

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);
+  z-index: 999;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 20px; /* vorher evtl. nur 10px oder weniger */
-  z-index: 1000;
 }
 
-.navbar-left,
+/* Wenn du Elemente gruppieren willst */
-.navbar-right {
+.nav-left,
+.nav-right {
   display: flex;
   align-items: center;
-  gap: 20px;
+  gap: 10px;
 }
 
 .navbar a,