NavBar v.0.0.1

frontend/src/components/LightDarkToggle.jsx

@@ -0,0 +1,24 @@
+// src/components/LightDarkToggle.jsx
+
+function LightDarkToggle() {
+  const toggleTheme = () => {
+    const body = document.body;
+    const currentTheme = body.classList.contains('dark') ? 'dark' : 'light';
+
+    if (currentTheme === 'dark') {
+      body.classList.remove('dark');
+      body.classList.add('light');
+    } else {
+      body.classList.remove('light');
+      body.classList.add('dark');
+    }
+  };
+
+  return (
+    <button className="navbar-btn" onClick={toggleTheme}>
+      🌓 Wechsel Theme
+    </button>
+  );
+}
+
+export default LightDarkToggle;

frontend/src/components/NavBar.jsx

@@ -0,0 +1,27 @@
+import { useNavigate } from 'react-router-dom';
+import LightDarkToggle from './LightDarkToggle';
+import LogoutButton from './LogoutButton';
+import './css/navBar.css';
+
+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>
+    </nav>
+  );
+}
+
+export default NavBar;