NavBar v.0.0.1

frontend/src/App.jsx

@@ -3,7 +3,10 @@ import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
 import LoginForm from './components/LoginForm';
 //import RegisterForm from './components/RegisterForm';
 import Md5Tool from './components/Md5Tool';
+import NavBar from './components/NavBar';
 import ToolOverview from './components/ToolOverview';
+
+
 import './css/base.css';
 import './css/buttons.css';
 import './css/menu.css';
@@ -15,13 +18,14 @@ function App() {
 
   return (
     <BrowserRouter>
-      <Routes>
+      <NavBar />
-        <Route path="/" element={isLoggedIn ? <ToolOverview /> : <Navigate to="/login" />} />
+        <Routes>
-        <Route path="/login" element={<LoginForm />} />
+          <Route path="/" element={isLoggedIn ? <ToolOverview /> : <Navigate to="/login" />} />
-        {/*<Route path="/register" element={<RegisterForm />} />*/}
+          <Route path="/login" element={<LoginForm />} />
-        <Route path="/tools/md5" element={isLoggedIn ? <Md5Tool /> : <Navigate to="/login" />} />
+          {/*<Route path="/register" element={<RegisterForm />} />*/}
-        {/*<Route path="/admin" element={isLoggedIn && role === 'admin' ? <AdminDashboard /> : <Navigate to="/" />} />*/}
+          <Route path="/tools/md5" element={isLoggedIn ? <Md5Tool /> : <Navigate to="/login" />} />
-      </Routes>
+          {/*<Route path="/admin" element={isLoggedIn && role === 'admin' ? <AdminDashboard /> : <Navigate to="/" />} />*/}
+        </Routes>
     </BrowserRouter>
   );
 }

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;

frontend/src/css/base.css

@@ -1,28 +1,9 @@
-/* base.css */
 :root {
-  --bg-color: #121212;
+  font-family: 'Arial', sans-serif;
-  --fg-color: #ffffff;
+  transition: background 0.3s, color 0.3s;
-  --accent-color: #4ea9ff;
-  --font-family: 'Segoe UI', sans-serif;
-  --button-bg: #3f51b5;
-  --button-hover: #5c6bc0;
 }
 
 body {
-  background-color: var(--bg-color);
-  color: var(--fg-color);
-  font-family: var(--font-family);
   margin: 0;
   padding: 0;
 }
-
-a {
-  color: var(--accent-color);
-  text-decoration: none;
-}
-
-.container {
-  max-width: 1200px;
-  margin: auto;
-  padding: 2rem;
-}

frontend/src/css/homeButtons.css

@@ -0,0 +1,14 @@
+.home-button {
+  background-color: transparent;
+  color: inherit;
+  border: none;
+  font-size: 16px;
+  padding: 5px 10px;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+}
+
+.home-button:hover {
+  background-color: rgba(255, 255, 255, 0.1);
+  border-radius: 5px;
+}

frontend/src/css/lightDarkToggle.css

@@ -0,0 +1,14 @@
+.toggle-button {
+  background-color: transparent;
+  color: inherit;
+  border: none;
+  font-size: 16px;
+  padding: 5px 10px;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+}
+
+.toggle-button:hover {
+  background-color: rgba(255, 255, 255, 0.1);
+  border-radius: 5px;
+}

frontend/src/css/menu.css

@@ -1,16 +1,31 @@
-/* menu.css */
 .navbar {
-  background-color: #1e1e2f;
-  color: white;
-  padding: 1rem 2rem;
   display: flex;
   justify-content: space-between;
   align-items: center;
-  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
+  background-color: var(--background-color);
+  padding: 0.5rem 1rem;
+  border-bottom: 1px solid var(--accent-color);
 }
 
-.navbar a {
+.navbar-left,
-  color: white;
+.navbar-right {
-  margin-left: 1rem;
+  display: flex;
-  font-weight: bold;
+  align-items: center;
+}
+
+.navbar-btn {
+  background: none;
+  border: none;
+  color: var(--text-color);
+  font-size: 1rem;
+  cursor: pointer;
+  margin: 0 0.3rem;
+}
+
+.navbar-btn:hover {
+  text-decoration: underline;
+}
+
+.navbar-spacer {
+  width: 1rem;
 }

frontend/src/css/navBar.css

@@ -0,0 +1,33 @@
+.navbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: var(--navbar-bg, #282c34);
+  padding: 10px 20px;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+  color: white;
+}
+
+.navbar-left button,
+.navbar-right button {
+  background-color: transparent;
+  border: none;
+  color: inherit;
+  font-size: 16px;
+  cursor: pointer;
+  margin-right: 10px;
+  padding: 5px 10px;
+  transition: background-color 0.2s;
+}
+
+.navbar-left button:hover,
+.navbar-right button:hover {
+  background-color: rgba(255, 255, 255, 0.1);
+  border-radius: 5px;
+}
+
+.navbar-right {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}

frontend/src/main.jsx

@@ -1,7 +1,7 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
-import './index.css'
 import App from './App.jsx'
+import './css/index.css'
 
 createRoot(document.getElementById('root')).render(
   <StrictMode>