From 0fd7a9bb7f329aaf781530ec8d1c05ae04955842 Mon Sep 17 00:00:00 2001
From: YasinOnm08 <onmazyasin4@gmail.com>
Date: Wed, 25 Sep 2024 11:40:17 +0200
Subject: [PATCH] header rewrite v2

---
 app/components/Header.tsx |  2 +-
 app/components/Login.tsx  |  4 ++--
 app/styles/header.css     | 35 +++++++++++++++++++++++++++++++++--
 3 files changed, 36 insertions(+), 5 deletions(-)

diff --git a/app/components/Header.tsx b/app/components/Header.tsx
index 50eaa60..6316306 100644
--- a/app/components/Header.tsx
+++ b/app/components/Header.tsx
@@ -40,7 +40,7 @@ const Header: React.FC<HeaderProps> = ({ onViewChange, showDivs, toggleDivs, sho
             )}
           </nav>
         <button onClick={() => onViewChange('AI')} className="header-button header-logo">
-          <p>1</p>
+          
         </button>
         <div className="login-button">
           <Login /> 
diff --git a/app/components/Login.tsx b/app/components/Login.tsx
index 6a6171f..ffcc81b 100644
--- a/app/components/Login.tsx
+++ b/app/components/Login.tsx
@@ -52,8 +52,8 @@ const Login: React.FC = () => {
   return (
     <div>
       {/* Login or Settings Button */}
-      
-      <button onClick={isLoggedIn ? toggleSettingsPopup : toggleLoginPopup}>
+
+      <button className='header-login-button' onClick={isLoggedIn ? toggleSettingsPopup : toggleLoginPopup}>
         {isLoggedIn ? 'Settings' : 'Log In'}
       </button>
 
diff --git a/app/styles/header.css b/app/styles/header.css
index 0e1303e..34dec85 100644
--- a/app/styles/header.css
+++ b/app/styles/header.css
@@ -6,15 +6,46 @@ header{
     width: 100%;
     height: 10vh;
     display: flex;
-    justify-content: space-between;
     align-items: center;
+    margin: 1.5vh 0;
 }
 
 .hamburger{
     display: none;
 }
 
-.login-button button{
+.hamburger.open:nth-child(1)
+
+.nav-links{
+    position: absolute;
+    display: flex;
+    gap: 15px;
+    width: 25vw;
+    height: 5vh;
+}
+
+.nav-btn{
+    background-color: transparent;
+    border: none;
+}
+
+.header-logo{
+    margin:auto;
+    width: 250px;
+    height: 5vh;
+    background-image: url(../../public/img/logo.png);
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: contain;
+    background-color: transparent;
+    border: none;
+}
+
+.login-button .header-login-button{
+    position: absolute;
+    top: 2.5vh;
+    right: 1vw;
+    justify-self: flex-end;
     padding: 10px 20px;
     background-color: var(--input-button-color);
     color: var(--text-color);