React-Group/interstellar_ai
1
1
Fork 2
Code Issues 8 Pull requests Projects Releases Packages Wiki Activity Actions

started hamburger menu

Browse source
This commit is contained in:
YasinOnm08 2024-09-24 14:54:39 +02:00
parent 615a58ce28
commit b539c3592a
2 changed files with 95 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

37
app/components/Header.tsx
View file

@ -1,5 +1,5 @@
// Header.tsx // Header.tsx
import React from 'react'; import React, { useState } from 'react';
import Login from './Login'; import Login from './Login';
interface HeaderProps { interface HeaderProps {
@ -11,29 +11,32 @@ interface HeaderProps {
} }
const Header: React.FC<HeaderProps> = ({ onViewChange, showDivs, toggleDivs, showHistoryModelsToggle, showToggle }) => { const Header: React.FC<HeaderProps> = ({ onViewChange, showDivs, toggleDivs, showHistoryModelsToggle, showToggle }) => {
const [menuOpen, setMenuOpen] = useState(false)
const toggleMenu = () => {
setMenuOpen(!menuOpen)
}
return ( return (
<> <>
<header> <header>
<ul> <div className={`hamburger ${menuOpen ? "open" : ""}`} onClick={toggleMenu}>
<li> <span></span>
<button onClick={() => onViewChange('AI')} className="header-button header-logo"> <span></span>
<img src="/img/logo.png" alt="logo" className="header-logo" /> <span></span>
</button> </div>
</li> <nav className={`nav-links ${menuOpen ? "active":""}`}>
<li> <button onClick={() => onViewChange('FAQ')} className="nav-btn">FAQ</button>
<button onClick={() => onViewChange('FAQ')} className="header-button">FAQ</button> <button onClick={() => onViewChange('Documentation')} className="nav-btn">Documentation</button>
</li>
<li>
<button onClick={() => onViewChange('Documentation')} className="header-button">Documentation</button>
</li>
{showToggle && showHistoryModelsToggle && ( {showToggle && showHistoryModelsToggle && (
<li> <button onClick={toggleDivs} className="nav-btn">
<button onClick={toggleDivs} className="header-button">
{showDivs ? 'Hide History/Models' : 'Show History/Models'} {showDivs ? 'Hide History/Models' : 'Show History/Models'}
</button> </button>
</li>
)} )}
</ul> </nav>
{/* <button onClick={() => onViewChange('AI')} className="header-button header-logo">
<img src="/img/logo.png" alt="logo" className="header-logo" />
</button> */}
<Login /> <Login />
</header> </header>
</> </>

91
app/styles/header.css
View file

@ -10,29 +10,84 @@ header {
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
z-index: 1000; z-index: 1000;
font-family: var(--font-family); font-family: var(--font-family);
display: flex;
justify-content: space-between;
align-items: center;
} }
header li { .nav-links{
display: inline-block; display: flex;
margin: 0 15px; gap: 15px;
} }
header img { .nav-btn{
height: 2em; background: transparent;
vertical-align: middle;
}
header a,
header li button {
color: var(--header-text-color); /* Use the new header text color */
text-decoration: none;
transition: color 0.3s;
border: none; border: none;
background-color: transparent; cursor: pointer;
font-size: 1em; /* color */
} }
header a:hover, .nav-btn:hover{
header li button:hover { /* color */
color: var(--input-button-color); /* Keep the hover color */ }
.hamburger{
display: none;
flex-direction: column;
cursor: pointer;
}
.hamburger span{
width: 25px;
height: 3px;
background-color: var(--header-text-color);
margin: 4px;
transition: 0.3s;
}
.hamburger.open span:nth-child(1){
transform: rotate(45deg) translate(5px, 5px);
}
.hamburger.open span:nth-child(2){
opacity: 0;
}
.hamburger.open span:nth-child(3){
transform: rotate(-45deg) translate(5px, -5px);
}
.header-button{
}
.header-button img{
height: 8vh;
}
@media (max-width:768px) {
.nav-links{
display: none;
position: absolute;
top: 60px;
right: 0;
/* background color */
width: 100%;
flex-direction: column;
align-items: flex-start;
padding: 10px;
}
.nav-links.active{
display: flex;
}
.nav-btn{
width: 100%;
text-align: center;
padding: 10px;
}
.hamburger{
display: flex;
}
} }