Header update factor 1

app/styles/header.css

@@ -1,4 +1,4 @@
-header{
+header {
     position: relative;
     padding: 0 20px;
     width: 100%;
@@ -10,15 +10,16 @@ header{
     z-index: 999;
 }
 
-.hamburger{
+/* Hamburger button styles */
+.hamburger {
     position: absolute;
     left: 5vw;
-    display: none;
+    display: flex; /* Always show hamburger button */
     flex-direction: column;
     cursor: pointer;
 }
 
-.hamburger span{
+.hamburger span {
     width: 25px;
     height: 3px;
     background-color: white;
@@ -26,43 +27,53 @@ header{
     transition: 0.3s;
 }
 
-.hamburger.open span:nth-child(1){
+.hamburger.open span:nth-child(1) {
     transform: rotate(45deg) translate(5px, 10px);
 }
-.hamburger.open span:nth-child(2){
+.hamburger.open span:nth-child(2) {
     opacity: 0;
 }
-.hamburger.open span:nth-child(3){
+.hamburger.open span:nth-child(3) {
     transform: rotate(-45deg) translate(5px, -10px);
 }
 
-
-
-.nav-links{
+/* Navigation links (hidden in header, shown in dropdown) */
+.nav-links {
+    display: none; /* Default hidden */
     position: absolute;
-    left: 1vw;
-    display: flex;
-    gap: 0.5vw;
-    width:max-content;
-    height: 100%;
-    align-items: center;
+    top: 10vh; /* Adjust as needed */
+    left: 0;
+    background-color: var(--burger-menu-background-color);
+    width: 100%;
+    flex-direction: column;
+    align-items: flex-start;
+    padding: 10px;
 }
 
-.nav-btn{
+.nav-links.active {
+    display: flex; /* Show when active */
+    height: fit-content;
+}
+
+.nav-btn {
     background-color: var(--input-button-color);
     border: none;
     font-size: 0.9em;
-    height: 50%;
+    height: 50px; /* Consistent height */
     border-radius: 5px;
-    padding: 2px 15px;
+    padding: 10px;
     font-family: var(--font-family);
+    width: 100%; /* Full width */
+    text-align: center; /* Center text */
+    margin: 4px;
 }
 
-.nav-btn:hover{
+.nav-btn:hover {
     background-color: var(--input-button-hover-color);
 }
 
-.header-logo{
+/* Logo styles */
+.header-logo {
     width: 250px;
     height: 5vh;
     background-image: url(../../public/img/logo.png);
@@ -73,7 +84,8 @@ header{
     border: none;
 }
 
-.login-button-container{
+/* Login button styles */
+.login-button-container {
     position: absolute;
     top: 0.1vh;
     right: 1vw;
@@ -82,9 +94,9 @@ header{
     align-items: center;
 }
 
-.header-login-button{
+.header-login-button {
     height: 100%;
-    width:max-content;
+    width: max-content;
     font-size: var(--font-size);
     padding: 0.5vw 1vw;
     background-color: var(--input-button-color);
@@ -101,4 +113,9 @@ header{
 
 .header-login-button:hover {
     background-color: var(--input-button-hover-color);
-}
+}
+
+.show-hide-btn{
+    width: fit-content;
+    align-self: left;
+}

app/styles/responsive.css

@@ -22,7 +22,7 @@
     width: 100vw;
     overflow: hidden;
     margin: 0;
-    padding: 1dvh 0 0 0 ;
+    padding: 1dvh 0 0 0;
   }
 
   /* Left panel styles */
@@ -100,20 +100,20 @@
     margin: 0;
   }
 
-  .header-logo{
+  .header-logo {
     position: relative;
     margin-left: -40px;
   }
 
-  .hamburger.open{
+  .hamburger.open {
     margin-top: 0.5vh;
     padding-left: 1vw;
   }
 
-  .nav-links{
-    display: none;
+  .nav-links {
+    display: none; /* Hidden by default */
     position: absolute;
-    top: 10vh;
+    top: 10vh; /* Adjust as needed */
     left: 0;
     background-color: var(--burger-menu-background-color);
     width: 100%;
@@ -123,24 +123,32 @@
     height: fit-content;
   }
 
-  .nav-links.active{
-    display: flex;
+  .nav-links.active {
+    display: flex; /* Show when active */
     height: fit-content;
   }
 
-  .nav-btn{
+  .nav-btn {
     width: 100%;
     text-align: center;
     padding: 10px;
     height: 50px;
-  }
-  
-  .hamburger {
-    display: flex;
+    background-color: var(--input-button-color);
+    border: none;
+    font-size: 0.9em;
+    border-radius: 5px;
   }
 
-  .header-login-button{
-    right: 5vh;
+  .nav-btn:hover {
+    background-color: var(--input-button-hover-color);
+  }
+
+  .hamburger {
+    display: flex; /* Always show hamburger button */
+  }
+
+  .header-login-button {
+    right: 5vh; /* Keep login button visible */
   }
 }