From 9b3a0bbc83839d147379a0063788e0e161cc18e0 Mon Sep 17 00:00:00 2001
From: YasinOnm08 <onmazyasin4@gmail.com>
Date: Wed, 25 Sep 2024 12:35:17 +0200
Subject: [PATCH] header rewrite done

---
 app/styles/Login.css      |  2 +-
 app/styles/container.css  |  3 ++-
 app/styles/header.css     | 24 ++++++++++++++++++++++--
 app/styles/responsive.css | 28 +++++++++++++++++++++++++---
 app/styles/variables.css  |  1 +
 5 files changed, 51 insertions(+), 7 deletions(-)

diff --git a/app/styles/Login.css b/app/styles/Login.css
index 579d780..610ce75 100644
--- a/app/styles/Login.css
+++ b/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;
diff --git a/app/styles/container.css b/app/styles/container.css
index e281216..854c997 100644
--- a/app/styles/container.css
+++ b/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 */
diff --git a/app/styles/header.css b/app/styles/header.css
index 34dec85..d085746 100644
--- a/app/styles/header.css
+++ b/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);
diff --git a/app/styles/responsive.css b/app/styles/responsive.css
index f09edeb..bcf54af 100644
--- a/app/styles/responsive.css
+++ b/app/styles/responsive.css
@@ -104,16 +104,38 @@
     color: var(--user-message-text-color); /* Use variable for button text color */
   }
 
-  .login-button button{
-    margin: 20px 0;
+  .header-login-button{
+    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 {
diff --git a/app/styles/variables.css b/app/styles/variables.css
index 928e21d..50847a8 100644
--- a/app/styles/variables.css
+++ b/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 */