forked from React-Group/interstellar_ai
Header update factor 1
This commit is contained in:
parent
e512280efd
commit
07c1f8366a
3 changed files with 139 additions and 83 deletions
|
|
@ -1,54 +1,85 @@
|
|||
import React, { useState } from 'react';
|
||||
import React, { useState, useRef, useEffect } from 'react';
|
||||
import Login from './Login';
|
||||
|
||||
interface HeaderProps {
|
||||
onViewChange: (view: 'AI' | 'FAQ' | 'Documentation' | 'Credits') => void; // Include 'Credits'
|
||||
showDivs: boolean;
|
||||
toggleDivs: () => void;
|
||||
showHistoryModelsToggle: boolean;
|
||||
showToggle: boolean;
|
||||
onViewChange: (view: 'AI' | 'FAQ' | 'Documentation' | 'Credits') => void;
|
||||
showDivs: boolean;
|
||||
toggleDivs: () => void;
|
||||
showHistoryModelsToggle: boolean;
|
||||
showToggle: boolean;
|
||||
}
|
||||
|
||||
const Header: React.FC<HeaderProps> = ({ onViewChange, showDivs, toggleDivs, showHistoryModelsToggle, showToggle }) => {
|
||||
const [menuOpen, setMenuOpen] = useState(false);
|
||||
const Header: React.FC<HeaderProps> = ({
|
||||
onViewChange,
|
||||
showDivs,
|
||||
toggleDivs,
|
||||
showHistoryModelsToggle,
|
||||
showToggle,
|
||||
}) => {
|
||||
const [menuOpen, setMenuOpen] = useState(false);
|
||||
const dropdownRef = useRef<HTMLDivElement | null>(null);
|
||||
const toggleRef = useRef<HTMLDivElement | null>(null);
|
||||
|
||||
const toggleMenu = () => {
|
||||
setMenuOpen(!menuOpen);
|
||||
};
|
||||
// Toggle menu state
|
||||
const toggleMenu = () => {
|
||||
setMenuOpen((prevMenuOpen) => !prevMenuOpen);
|
||||
};
|
||||
|
||||
const buttonClicked = (page: "AI" | "Documentation" | "FAQ" | "Credits") => { // Add 'Credits' to the options here
|
||||
onViewChange(page);
|
||||
toggleMenu();
|
||||
};
|
||||
// Handle button click
|
||||
const buttonClicked = (page: "AI" | "Documentation" | "FAQ" | "Credits") => {
|
||||
onViewChange(page);
|
||||
setMenuOpen(false); // Close the menu when a button is clicked
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<header>
|
||||
<div className={`hamburger ${menuOpen ? "open" : ""}`} onClick={toggleMenu}>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
<nav className={`nav-links ${menuOpen ? "active" : ""}`}>
|
||||
<button onClick={() => buttonClicked("AI")} className="nav-btn">Chat</button>
|
||||
<button onClick={() => buttonClicked("FAQ")} className="nav-btn">FAQ</button>
|
||||
<button onClick={() => buttonClicked("Documentation")} className="nav-btn">Documentation</button>
|
||||
<button onClick={() => buttonClicked("Credits")} className="nav-btn">Credits</button> {/* Add Credits tab */}
|
||||
{showToggle && showHistoryModelsToggle && (
|
||||
<button onClick={toggleDivs} className="nav-btn">
|
||||
{showDivs ? 'Hide History/Models' : 'Show History/Models'}
|
||||
</button>
|
||||
)}
|
||||
</nav>
|
||||
<div className="header-button header-logo">
|
||||
{/* AI logo or text */}
|
||||
</div>
|
||||
<div className="login-button-container">
|
||||
<Login />
|
||||
</div>
|
||||
</header>
|
||||
</>
|
||||
);
|
||||
// Effect to handle clicks outside of the dropdown
|
||||
useEffect(() => {
|
||||
const handleClickOutside = (event: MouseEvent) => {
|
||||
// Check if the click is outside both the dropdown and the hamburger menu
|
||||
if (
|
||||
dropdownRef.current &&
|
||||
!dropdownRef.current.contains(event.target as Node) &&
|
||||
toggleRef.current &&
|
||||
!toggleRef.current.contains(event.target as Node)
|
||||
) {
|
||||
setMenuOpen(false);
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener('mousedown', handleClickOutside);
|
||||
|
||||
return () => {
|
||||
document.removeEventListener('mousedown', handleClickOutside);
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<header>
|
||||
{showToggle && showHistoryModelsToggle && (
|
||||
<button onClick={toggleDivs} className="nav-btn show-hide-btn">
|
||||
{showDivs ? 'Hide History/Models' : 'Show History/Models'}
|
||||
</button>
|
||||
)}
|
||||
<nav ref={dropdownRef} className={`nav-links ${menuOpen ? "active" : ""}`}>
|
||||
<button onClick={() => buttonClicked("AI")} className="nav-btn">Chat</button>
|
||||
<button onClick={() => buttonClicked("FAQ")} className="nav-btn">FAQ</button>
|
||||
<button onClick={() => buttonClicked("Documentation")} className="nav-btn">Documentation</button>
|
||||
<button onClick={() => buttonClicked("Credits")} className="nav-btn">Credits</button>
|
||||
</nav>
|
||||
<div ref={toggleRef} className={`hamburger ${menuOpen ? "open" : ""}`} onClick={toggleMenu}>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
<div className="header-button header-logo">
|
||||
{/* AI logo or text */}
|
||||
</div>
|
||||
<div className="login-button-container">
|
||||
<Login />
|
||||
</div>
|
||||
</header>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Header;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
header{
|
||||
header {
|
||||
position: relative;
|
||||
padding: 0 20px;
|
||||
width: 100%;
|
||||
|
|
@ -10,15 +10,16 @@ header{
|
|||
z-index: 999;
|
||||
}
|
||||
|
||||
.hamburger{
|
||||
/* Hamburger button styles */
|
||||
.hamburger {
|
||||
position: absolute;
|
||||
left: 5vw;
|
||||
display: none;
|
||||
display: flex; /* Always show hamburger button */
|
||||
flex-direction: column;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.hamburger span{
|
||||
.hamburger span {
|
||||
width: 25px;
|
||||
height: 3px;
|
||||
background-color: white;
|
||||
|
|
@ -26,43 +27,53 @@ header{
|
|||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.hamburger.open span:nth-child(1){
|
||||
.hamburger.open span:nth-child(1) {
|
||||
transform: rotate(45deg) translate(5px, 10px);
|
||||
}
|
||||
.hamburger.open span:nth-child(2){
|
||||
.hamburger.open span:nth-child(2) {
|
||||
opacity: 0;
|
||||
}
|
||||
.hamburger.open span:nth-child(3){
|
||||
.hamburger.open span:nth-child(3) {
|
||||
transform: rotate(-45deg) translate(5px, -10px);
|
||||
}
|
||||
|
||||
|
||||
|
||||
.nav-links{
|
||||
/* Navigation links (hidden in header, shown in dropdown) */
|
||||
.nav-links {
|
||||
display: none; /* Default hidden */
|
||||
position: absolute;
|
||||
left: 1vw;
|
||||
display: flex;
|
||||
gap: 0.5vw;
|
||||
width:max-content;
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
top: 10vh; /* Adjust as needed */
|
||||
left: 0;
|
||||
background-color: var(--burger-menu-background-color);
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.nav-btn{
|
||||
.nav-links.active {
|
||||
display: flex; /* Show when active */
|
||||
height: fit-content;
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
background-color: var(--input-button-color);
|
||||
border: none;
|
||||
font-size: 0.9em;
|
||||
height: 50%;
|
||||
height: 50px; /* Consistent height */
|
||||
border-radius: 5px;
|
||||
padding: 2px 15px;
|
||||
padding: 10px;
|
||||
font-family: var(--font-family);
|
||||
width: 100%; /* Full width */
|
||||
text-align: center; /* Center text */
|
||||
margin: 4px;
|
||||
}
|
||||
|
||||
.nav-btn:hover{
|
||||
.nav-btn:hover {
|
||||
background-color: var(--input-button-hover-color);
|
||||
}
|
||||
|
||||
.header-logo{
|
||||
/* Logo styles */
|
||||
.header-logo {
|
||||
width: 250px;
|
||||
height: 5vh;
|
||||
background-image: url(../../public/img/logo.png);
|
||||
|
|
@ -73,7 +84,8 @@ header{
|
|||
border: none;
|
||||
}
|
||||
|
||||
.login-button-container{
|
||||
/* Login button styles */
|
||||
.login-button-container {
|
||||
position: absolute;
|
||||
top: 0.1vh;
|
||||
right: 1vw;
|
||||
|
|
@ -82,9 +94,9 @@ header{
|
|||
align-items: center;
|
||||
}
|
||||
|
||||
.header-login-button{
|
||||
.header-login-button {
|
||||
height: 100%;
|
||||
width:max-content;
|
||||
width: max-content;
|
||||
font-size: var(--font-size);
|
||||
padding: 0.5vw 1vw;
|
||||
background-color: var(--input-button-color);
|
||||
|
|
@ -101,4 +113,9 @@ header{
|
|||
|
||||
.header-login-button:hover {
|
||||
background-color: var(--input-button-hover-color);
|
||||
}
|
||||
}
|
||||
|
||||
.show-hide-btn{
|
||||
width: fit-content;
|
||||
align-self: left;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@
|
|||
width: 100vw;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
padding: 1dvh 0 0 0 ;
|
||||
padding: 1dvh 0 0 0;
|
||||
}
|
||||
|
||||
/* Left panel styles */
|
||||
|
|
@ -100,20 +100,20 @@
|
|||
margin: 0;
|
||||
}
|
||||
|
||||
.header-logo{
|
||||
.header-logo {
|
||||
position: relative;
|
||||
margin-left: -40px;
|
||||
}
|
||||
|
||||
.hamburger.open{
|
||||
.hamburger.open {
|
||||
margin-top: 0.5vh;
|
||||
padding-left: 1vw;
|
||||
}
|
||||
|
||||
.nav-links{
|
||||
display: none;
|
||||
.nav-links {
|
||||
display: none; /* Hidden by default */
|
||||
position: absolute;
|
||||
top: 10vh;
|
||||
top: 10vh; /* Adjust as needed */
|
||||
left: 0;
|
||||
background-color: var(--burger-menu-background-color);
|
||||
width: 100%;
|
||||
|
|
@ -123,24 +123,32 @@
|
|||
height: fit-content;
|
||||
}
|
||||
|
||||
.nav-links.active{
|
||||
display: flex;
|
||||
.nav-links.active {
|
||||
display: flex; /* Show when active */
|
||||
height: fit-content;
|
||||
}
|
||||
|
||||
.nav-btn{
|
||||
.nav-btn {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
padding: 10px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.hamburger {
|
||||
display: flex;
|
||||
background-color: var(--input-button-color);
|
||||
border: none;
|
||||
font-size: 0.9em;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.header-login-button{
|
||||
right: 5vh;
|
||||
.nav-btn:hover {
|
||||
background-color: var(--input-button-hover-color);
|
||||
}
|
||||
|
||||
.hamburger {
|
||||
display: flex; /* Always show hamburger button */
|
||||
}
|
||||
|
||||
.header-login-button {
|
||||
right: 5vh; /* Keep login button visible */
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue