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

Header update factor 1

Browse source
This commit is contained in:
sageTheDM 2024-10-08 09:44:44 +02:00
parent e512280efd
commit 07c1f8366a
3 changed files with 139 additions and 83 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

67
app/components/Header.tsx
View file

@ -1,45 +1,76 @@
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'
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 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);
// Toggle menu state
const toggleMenu = () => {
setMenuOpen(!menuOpen);
setMenuOpen((prevMenuOpen) => !prevMenuOpen);
};
const buttonClicked = (page: "AI" | "Documentation" | "FAQ" | "Credits") => { // Add 'Credits' to the options here
// Handle button click
const buttonClicked = (page: "AI" | "Documentation" | "FAQ" | "Credits") => {
onViewChange(page);
toggleMenu();
setMenuOpen(false); // Close the menu when a button is clicked
};
// 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>
<div className={`hamburger ${menuOpen ? "open" : ""}`} onClick={toggleMenu}>
{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>
<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>

39
app/styles/header.css
View file

@ -10,10 +10,11 @@ header{
z-index: 999;
}
/* Hamburger button styles */
.hamburger {
position: absolute;
left: 5vw;
display: none;
display: flex; /* Always show hamburger button */
flex-direction: column;
cursor: pointer;
}
@ -36,32 +37,42 @@ header{
transform: rotate(-45deg) translate(5px, -10px);
}
/* 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-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 {
background-color: var(--input-button-hover-color);
}
/* Logo styles */
.header-logo {
width: 250px;
height: 5vh;
@ -73,6 +84,7 @@ header{
border: none;
}
/* Login button styles */
.login-button-container {
position: absolute;
top: 0.1vh;
@ -102,3 +114,8 @@ header{
.header-login-button:hover {
background-color: var(--input-button-hover-color);
}
.show-hide-btn{
width: fit-content;
align-self: left;
}

18
app/styles/responsive.css
View file

@ -111,9 +111,9 @@
}
.nav-links {
display: none;
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%;
@ -124,7 +124,7 @@
}
.nav-links.active {
display: flex;
display: flex; /* Show when active */
height: fit-content;
}
@ -133,14 +133,22 @@
text-align: center;
padding: 10px;
height: 50px;
background-color: var(--input-button-color);
border: none;
font-size: 0.9em;
border-radius: 5px;
}
.nav-btn:hover {
background-color: var(--input-button-hover-color);
}
.hamburger {
display: flex;
display: flex; /* Always show hamburger button */
}
.header-login-button {
right: 5vh;
right: 5vh; /* Keep login button visible */
}
}