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

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>
</>