Merge pull request 'header rewrite done' (#46) from YasinOnm08/interstellar_ai:main into main

Reviewed-on: https://interstellardevelopment.org/code/code/React-Group/interstellar_ai/pulls/46

app/styles/Login.css

@@ -15,7 +15,7 @@
 
 /* Popup content box */
 .popup-content {
-    background: var(--popup-background-color); /* Use variable for background color */
+    background-color: var(--popup-background-color); /* Use variable for background color */
     color: var(--popup-text-color); /* Use variable for text color */
     padding: 30px;
     border-radius: 10px;

app/styles/container.css

@@ -1,7 +1,6 @@
 /* container.css */
 .container,
 .content {
-    padding-top: 10vh;
     display: flex;
     height: 100vh;
     width: 100vw;
@@ -10,6 +9,7 @@
 }
 
 .left-panel {
+    margin-top: 10vh;
     width: 25vw; /* Adjust as needed */
     transition: width 0.3s ease, opacity 0.3s ease, visibility 0.3s ease; /* Smooth transitions for all properties */
     background-color: var(--left-panel-background-color); /* Use variable for background color */
@@ -25,6 +25,7 @@
 }
 
 .conversation-container {
+    margin-top: 10vh;
     flex: 1;
     transition: margin-left 0.3s ease; /* Smooth margin adjustment */
     background-color: var(--conversation-background-color); /* Use variable for background color */

app/styles/header.css

@@ -11,10 +11,31 @@ header{
 }
 
 .hamburger{
+    position: absolute;
     display: none;
+    flex-direction: column;
+    cursor: pointer;
 }
 
-.hamburger.open:nth-child(1)
+.hamburger span{
+    width: 25px;
+    height: 3px;
+    background-color: white;
+    margin: 4px;
+    transition: 0.3s;
+}
+
+.hamburger.open span:nth-child(1){
+    transform: rotate(45deg) translate(5px, 10px);
+}
+.hamburger.open span:nth-child(2){
+    opacity: 0;
+}
+.hamburger.open span:nth-child(3){
+    transform: rotate(-45deg) translate(5px, -10px);
+}
+
+
 
 .nav-links{
     position: absolute;
@@ -45,7 +66,6 @@ header{
     position: absolute;
     top: 2.5vh;
     right: 1vw;
-    justify-self: flex-end;
     padding: 10px 20px;
     background-color: var(--input-button-color);
     color: var(--text-color);

app/styles/responsive.css

@@ -104,16 +104,38 @@
     color: var(--user-message-text-color); /* Use variable for button text color */
   }
 
-  .login-button button{
+  .header-login-button{
-    margin: 20px 0;
+    position: absolute;
+    top: 3.5vh;
+    right: 5vw;
   } 
 
   .hamburger.open{
     margin-top: 0.5vh;
+    padding-left: 1vw;
   }
 
   .nav-links{
-    position: fixed;
+    display: none;
+    position: absolute;
+    top: 10vh;
+    left: 0;
+    background-color: var(--burger-menu-background-color);
+    width: 100%;
+    flex-direction: column;
+    align-items: flex-start;
+    padding: 10px;
+    height: fit-content;
+  }
+
+  .nav-links.active{
+    display: flex;
+  }
+
+  .nav-btn{
+    width: 100%;
+    text-align: left;
+    padding: 10px;
   }
   
   .hamburger {

app/styles/variables.css

@@ -29,6 +29,7 @@
     --faq-item-text-color: #333; /* Text color for FAQ items */
     --faq-item-hover-background-color: #e0e0e0; /* Hover background color for FAQ items */
 
+    --popup-background-color: #8B9635
     --pop-up-text: #000; /* Text color for pop-ups */
     --input-border-color: #8B9635; /* Input border color */
     --font-family: 'Poppins', 'sans-serif';/* Default font family */