YasinOnm08/interstellar_ai
0
0
Fork 0
forked from React-Group/interstellar_ai
Code Pull requests Activity

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

Browse source 
Reviewed-on: https://interstellardevelopment.org/code/code/React-Group/interstellar_ai/pulls/44
This commit is contained in:
Patrick 2024-09-25 11:41:00 +02:00
commit 2c72090de4
3 changed files with 36 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

2
app/components/Header.tsx
View file

@ -40,7 +40,7 @@ const Header: React.FC<HeaderProps> = ({ onViewChange, showDivs, toggleDivs, sho
)} )}
</nav> </nav>
<button onClick={() => onViewChange('AI')} className="header-button header-logo"> <button onClick={() => onViewChange('AI')} className="header-button header-logo">
<p>1</p>
</button> </button>
<div className="login-button"> <div className="login-button">
<Login /> <Login />

2
app/components/Login.tsx
View file

@ -54,7 +54,7 @@ const Login: React.FC = () => {
<div> <div>
{/* Login or Settings Button */} {/* Login or Settings Button */}
<button onClick={isLoggedIn ? toggleSettingsPopup : toggleLoginPopup}> <button className='header-login-button' onClick={isLoggedIn ? toggleSettingsPopup : toggleLoginPopup}>
{isLoggedIn ? 'Settings' : 'Log In'} {isLoggedIn ? 'Settings' : 'Log In'}
</button> </button>

35
app/styles/header.css
View file

@ -6,15 +6,46 @@ header{
width: 100%; width: 100%;
height: 10vh; height: 10vh;
display: flex; display: flex;
justify-content: space-between;
align-items: center; align-items: center;
margin: 1.5vh 0;
} }
.hamburger{ .hamburger{
display: none; 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; padding: 10px 20px;
background-color: var(--input-button-color); background-color: var(--input-button-color);
color: var(--text-color); color: var(--text-color);