changes

public/styles.css

@@ -36,3 +36,62 @@
   font-weight: bold;
   cursor: pointer;
 }
+
+.navbar {
+  position: relative;
+  background: #333;
+  color: #fff;
+  display: flex;
+  align-items: center;
+  padding: 0.5rem 1rem;
+}
+
+.menu-icon {
+  cursor: pointer;
+  display: inline-block;
+}
+
+.menu-icon span {
+  display: block;
+  width: 25px;
+  height: 3px;
+  margin: 5px 0;
+  background: #fff;
+  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;
+}
+