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

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
Show stats Download patch file Download diff file Expand all files Collapse all files

41
app/components/Header.tsx
View file

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

91
app/styles/header.css
View file

@ -10,29 +10,84 @@ header {
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
z-index: 1000;
font-family: var(--font-family);
display: flex;
justify-content: space-between;
align-items: center;
}
header li {
display: inline-block;
margin: 0 15px;
.nav-links{
display: flex;
gap: 15px;
}
header img {
height: 2em;
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;
.nav-btn{
background: transparent;
border: none;
background-color: transparent;
font-size: 1em;
cursor: pointer;
/* color */
}
header a:hover,
header li button:hover {
color: var(--input-button-color); /* Keep the hover color */
.nav-btn: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;
}
}