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);