From d927679667ba52201254e170aa2d8373a12f5349 Mon Sep 17 00:00:00 2001
From: Nirodan <nirodan.production@gmail.com>
Date: Mon, 7 Jul 2025 10:57:18 +0200
Subject: [PATCH] NavBar v.0.0.1

---
 frontend/src/App.jsx                        | 18 ++++++-----
 frontend/src/components/LightDarkToggle.jsx | 24 +++++++++++++++
 frontend/src/components/NavBar.jsx          | 27 +++++++++++++++++
 frontend/src/css/base.css                   | 23 ++------------
 frontend/src/css/homeButtons.css            | 14 +++++++++
 frontend/src/css/lightDarkToggle.css        | 14 +++++++++
 frontend/src/css/logoutButton.css           |  0
 frontend/src/css/menu.css                   | 33 +++++++++++++++------
 frontend/src/css/navBar.css                 | 33 +++++++++++++++++++++
 frontend/src/main.jsx                       |  2 +-
 10 files changed, 150 insertions(+), 38 deletions(-)
 create mode 100644 frontend/src/components/LightDarkToggle.jsx
 create mode 100644 frontend/src/components/NavBar.jsx
 create mode 100644 frontend/src/css/homeButtons.css
 create mode 100644 frontend/src/css/lightDarkToggle.css
 create mode 100644 frontend/src/css/logoutButton.css
 create mode 100644 frontend/src/css/navBar.css

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 4f7a861..f6d8220 100644
--- a/frontend/src/App.jsx
+++ b/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>
-        <Route path="/" element={isLoggedIn ? <ToolOverview /> : <Navigate to="/login" />} />
-        <Route path="/login" element={<LoginForm />} />
-        {/*<Route path="/register" element={<RegisterForm />} />*/}
-        <Route path="/tools/md5" element={isLoggedIn ? <Md5Tool /> : <Navigate to="/login" />} />
-        {/*<Route path="/admin" element={isLoggedIn && role === 'admin' ? <AdminDashboard /> : <Navigate to="/" />} />*/}
-      </Routes>
+      <NavBar />
+        <Routes>
+          <Route path="/" element={isLoggedIn ? <ToolOverview /> : <Navigate to="/login" />} />
+          <Route path="/login" element={<LoginForm />} />
+          {/*<Route path="/register" element={<RegisterForm />} />*/}
+          <Route path="/tools/md5" element={isLoggedIn ? <Md5Tool /> : <Navigate to="/login" />} />
+          {/*<Route path="/admin" element={isLoggedIn && role === 'admin' ? <AdminDashboard /> : <Navigate to="/" />} />*/}
+        </Routes>
     </BrowserRouter>
   );
 }
diff --git a/frontend/src/components/LightDarkToggle.jsx b/frontend/src/components/LightDarkToggle.jsx
new file mode 100644
index 0000000..11d2b0e
--- /dev/null
+++ b/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;
diff --git a/frontend/src/components/NavBar.jsx b/frontend/src/components/NavBar.jsx
new file mode 100644
index 0000000..249b006
--- /dev/null
+++ b/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;
diff --git a/frontend/src/css/base.css b/frontend/src/css/base.css
index 68c670f..274668e 100644
--- a/frontend/src/css/base.css
+++ b/frontend/src/css/base.css
@@ -1,28 +1,9 @@
-/* base.css */
 :root {
-  --bg-color: #121212;
-  --fg-color: #ffffff;
-  --accent-color: #4ea9ff;
-  --font-family: 'Segoe UI', sans-serif;
-  --button-bg: #3f51b5;
-  --button-hover: #5c6bc0;
+  font-family: 'Arial', sans-serif;
+  transition: background 0.3s, color 0.3s;
 }
 
 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;
-}
diff --git a/frontend/src/css/homeButtons.css b/frontend/src/css/homeButtons.css
new file mode 100644
index 0000000..ae27566
--- /dev/null
+++ b/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;
+}
diff --git a/frontend/src/css/lightDarkToggle.css b/frontend/src/css/lightDarkToggle.css
new file mode 100644
index 0000000..de69f52
--- /dev/null
+++ b/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;
+}
diff --git a/frontend/src/css/logoutButton.css b/frontend/src/css/logoutButton.css
new file mode 100644
index 0000000..e69de29
diff --git a/frontend/src/css/menu.css b/frontend/src/css/menu.css
index 611dda0..2c3ba88 100644
--- a/frontend/src/css/menu.css
+++ b/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 {
-  color: white;
-  margin-left: 1rem;
-  font-weight: bold;
+.navbar-left,
+.navbar-right {
+  display: flex;
+  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;
 }
diff --git a/frontend/src/css/navBar.css b/frontend/src/css/navBar.css
new file mode 100644
index 0000000..35e152f
--- /dev/null
+++ b/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;
+}
diff --git a/frontend/src/main.jsx b/frontend/src/main.jsx
index b9a1a6d..c7be0e9 100644
--- a/frontend/src/main.jsx
+++ b/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>