NavBar v.0.0.1

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;
-}

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 {
-  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;
 }

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;
+}