changes

public/js/nav.js

@@ -1,8 +0,0 @@
-document.addEventListener('DOMContentLoaded', function() {
-    const menuIcon = document.getElementById('menu-icon');
-    const navLinks = document.getElementById('nav-links');
-
-    menuIcon.addEventListener('click', function() {
-        navLinks.classList.toggle('active');
-        });
-    });

public/styles.css

@@ -37,15 +37,48 @@
   cursor: pointer;
 }
 
-.navbar {
-  position: relative;
-  background: #333;
-  color: #fff;
-  display: inline-block;
-  align-items: center;
-  padding: 0.5rem 1rem;
-  top:0;
-  left:0;
+
+/* General Reset */
+body {
+  margin: 0;
+  font-family: Arial, sans-serif;
+  display: flex; /* Ensure the body uses a flex container */
+  height: 100vh; /* Full viewport height */
+}
+
+/* Sidebar (Nav Links) */
+.nav-links {
+  width: 250px; /* Set a fixed width for the sidebar */
+  background-color: #f4f4f4; /* Light gray background */
+  padding: 20px;
+  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1); /* Add a slight shadow for separation */
+  display: flex;
+  flex-direction: column; /* Ensure items stack vertically */
+  justify-content: flex-start; /* Optional: adjust spacing of items */
+  min-height: 100vh; /* Stretch to full viewport height */
+}
+
+.nav-links nav ul {
+  list-style: none; /* Remove bullet points */
+  padding: 0;
+}
+
+.nav-links nav ul li {
+  margin: 10px 0; /* Add spacing between links */
+}
+
+.nav-links nav ul li a {
+  text-decoration: none; /* Remove underline */
+  color: #333;
+}
+
+.nav-links nav ul li a:hover {
+  color: #007BFF; /* Change link color on hover */
+}
+
+.content {
+  flex-grow: 1; /* Allow content to fill the remaining space */
+  padding: 20px;
 }
 
 .menu-icon {
@@ -62,38 +95,3 @@
   transition: 0.4s;
 }
 
-.nav-links {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  display: none; /* Hidden by default; shown when .active */
-  position: absolute;
-  top: 100%;  /* Appear below the navbar */
-  left: 0;    /* Aligned left under the hamburger */
-  width: 200px; /* Fixed width for the dropdown panel */
-  background: #333;
-  box-shadow: 0 2px 8px rgba(0,0,0,0.4); /* Optional shadow for a "dropdown" effect */
-  border-radius: 4px; /* Slight rounding for a nicer look */
-}
-
-.nav-links li {
-  border-bottom: 1px solid #444;
-}
-
-.nav-links li:last-child {
-  border-bottom: none; /* No border on the last item */
-}
-
-.nav-links li a {
-  color: #fff;
-  text-decoration: none;
-  display: block;
-  padding: 0.75rem 1rem;
-  white-space: nowrap; /* Prevent awkward text wrapping */
-}
-
-/* Show the nav-links when .active is toggled by JavaScript */
-.nav-links.active {
-  display: block;
-}
-