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

Compare commits

base: sageTheDm:7ba4d2925384ce256823fd4ff01a5c0a8a4d41ef
Branches Tags
sageTheDm:main
React-Group:main
..
compare: sageTheDm:e512280efdf9f71ab7aed705542501dd9e997cbc
Branches Tags
sageTheDm:main
React-Group:main

No commits in common. "7ba4d2925384ce256823fd4ff01a5c0a8a4d41ef" and "e512280efdf9f71ab7aed705542501dd9e997cbc" have entirely different histories.
7ba4d29253 ... e512280efd

4 changed files with 81 additions and 149 deletions
Show stats Expand all files Collapse all files

117
app/components/Header.tsx
View file

@ -1,85 +1,54 @@
import React, { useState, useRef, useEffect } from 'react'; import React, { useState } from 'react';
import Login from './Login'; import Login from './Login';
interface HeaderProps { interface HeaderProps {
onViewChange: (view: 'AI' | 'FAQ' | 'Documentation' | 'Credits') => void; onViewChange: (view: 'AI' | 'FAQ' | 'Documentation' | 'Credits') => void; // Include 'Credits'
showDivs: boolean; showDivs: boolean;
toggleDivs: () => void; toggleDivs: () => void;
showHistoryModelsToggle: boolean; showHistoryModelsToggle: boolean;
showToggle: boolean; showToggle: boolean;
} }
const Header: React.FC<HeaderProps> = ({ const Header: React.FC<HeaderProps> = ({ onViewChange, showDivs, toggleDivs, showHistoryModelsToggle, showToggle }) => {
onViewChange, const [menuOpen, setMenuOpen] = useState(false);
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 = () => {
const toggleMenu = () => { setMenuOpen(!menuOpen);
setMenuOpen((prevMenuOpen) => !prevMenuOpen); };
};
// Handle button click const buttonClicked = (page: "AI" | "Documentation" | "FAQ" | "Credits") => { // Add 'Credits' to the options here
const buttonClicked = (page: "AI" | "Documentation" | "FAQ" | "Credits") => { onViewChange(page);
onViewChange(page); toggleMenu();
setMenuOpen(false); // Close the menu when a button is clicked };
};
// Effect to handle clicks outside of the dropdown return (
useEffect(() => { <>
const handleClickOutside = (event: MouseEvent) => { <header>
// Check if the click is outside both the dropdown and the hamburger menu <div className={`hamburger ${menuOpen ? "open" : ""}`} onClick={toggleMenu}>
if ( <span></span>
dropdownRef.current && <span></span>
!dropdownRef.current.contains(event.target as Node) && <span></span>
toggleRef.current && </div>
!toggleRef.current.contains(event.target as Node) <nav className={`nav-links ${menuOpen ? "active" : ""}`}>
) { <button onClick={() => buttonClicked("AI")} className="nav-btn">Chat</button>
setMenuOpen(false); <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 && (
document.addEventListener('mousedown', handleClickOutside); <button onClick={toggleDivs} className="nav-btn">
{showDivs ? 'Hide History/Models' : 'Show History/Models'}
return () => { </button>
document.removeEventListener('mousedown', handleClickOutside); )}
}; </nav>
}, []); <div className="header-button header-logo">
{/* AI logo or text */}
return ( </div>
<> <div className="login-button-container">
<header> <Login />
{showToggle && showHistoryModelsToggle && ( </div>
<button onClick={toggleDivs} className="nav-btn show-hide-btn"> </header>
{showDivs ? 'Hide' : 'Show'} </>
</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-logo">
{/* AI logo or text */}
</div>
<div className="login-button-container">
<Login />
</div>
</header>
</>
);
}; };
export default Header; export default Header;

68
app/styles/header.css
View file

@ -1,4 +1,4 @@
header { header{
position: relative; position: relative;
padding: 0 20px; padding: 0 20px;
width: 100%; width: 100%;
@ -10,16 +10,15 @@ header {
z-index: 999; z-index: 999;
} }
/* Hamburger button styles */ .hamburger{
.hamburger {
position: absolute; position: absolute;
left: 5vw; left: 5vw;
display: flex; /* Always show hamburger button */ display: none;
flex-direction: column; flex-direction: column;
cursor: pointer; cursor: pointer;
} }
.hamburger span { .hamburger span{
width: 25px; width: 25px;
height: 3px; height: 3px;
background-color: white; background-color: white;
@ -27,53 +26,43 @@ header {
transition: 0.3s; transition: 0.3s;
} }
.hamburger.open span:nth-child(1) { .hamburger.open span:nth-child(1){
transform: rotate(45deg) translate(5px, 10px); transform: rotate(45deg) translate(5px, 10px);
} }
.hamburger.open span:nth-child(2) { .hamburger.open span:nth-child(2){
opacity: 0; opacity: 0;
} }
.hamburger.open span:nth-child(3) { .hamburger.open span:nth-child(3){
transform: rotate(-45deg) translate(5px, -10px); transform: rotate(-45deg) translate(5px, -10px);
} }
/* Navigation links (hidden in header, shown in dropdown) */
.nav-links {
display: none; /* Default hidden */ .nav-links{
position: absolute; position: absolute;
top: 10vh; /* Adjust as needed */ left: 1vw;
left: 0; display: flex;
background-color: var(--burger-menu-background-color); gap: 0.5vw;
width: 100%; width:max-content;
flex-direction: column; height: 100%;
align-items: flex-start; align-items: center;
padding: 10px;
} }
.nav-links.active { .nav-btn{
display: flex; /* Show when active */
height: fit-content;
}
.nav-btn {
background-color: var(--input-button-color); background-color: var(--input-button-color);
border: none; border: none;
font-size: 0.9em; font-size: 0.9em;
height: 50px; /* Consistent height */ height: 50%;
border-radius: 5px; border-radius: 5px;
padding: 10px; padding: 2px 15px;
font-family: var(--font-family); 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); background-color: var(--input-button-hover-color);
} }
/* Logo styles */ .header-logo{
.header-logo {
width: 250px; width: 250px;
height: 5vh; height: 5vh;
background-image: url(../../public/img/logo.png); background-image: url(../../public/img/logo.png);
@ -84,8 +73,7 @@ header {
border: none; border: none;
} }
/* Login button styles */ .login-button-container{
.login-button-container {
position: absolute; position: absolute;
top: 0.1vh; top: 0.1vh;
right: 1vw; right: 1vw;
@ -94,9 +82,9 @@ header {
align-items: center; align-items: center;
} }
.header-login-button { .header-login-button{
height: 100%; height: 100%;
width: max-content; width:max-content;
font-size: var(--font-size); font-size: var(--font-size);
padding: 0.5vw 1vw; padding: 0.5vw 1vw;
background-color: var(--input-button-color); background-color: var(--input-button-color);
@ -113,12 +101,4 @@ header {
.header-login-button:hover { .header-login-button:hover {
background-color: var(--input-button-hover-color); background-color: var(--input-button-hover-color);
}
.show-hide-btn{
width: fit-content;
align-self: left;
position: absolute;
left: 10vw;
cursor: pointer;
} }

45
app/styles/responsive.css
View file

@ -22,7 +22,7 @@
width: 100vw; width: 100vw;
overflow: hidden; overflow: hidden;
margin: 0; margin: 0;
padding: 1dvh 0 0 0; padding: 1dvh 0 0 0 ;
} }
/* Left panel styles */ /* Left panel styles */
@ -100,19 +100,20 @@
margin: 0; margin: 0;
} }
.header-logo { .header-logo{
position: relative; position: relative;
margin-left: -40px;
} }
.hamburger.open { .hamburger.open{
margin-top: 0.5vh; margin-top: 0.5vh;
padding-left: 1vw; padding-left: 1vw;
} }
.nav-links { .nav-links{
display: none; /* Hidden by default */ display: none;
position: absolute; position: absolute;
top: 10vh; /* Adjust as needed */ top: 10vh;
left: 0; left: 0;
background-color: var(--burger-menu-background-color); background-color: var(--burger-menu-background-color);
width: 100%; width: 100%;
@ -122,42 +123,24 @@
height: fit-content; height: fit-content;
} }
.nav-links.active { .nav-links.active{
display: flex; /* Show when active */ display: flex;
height: fit-content; height: fit-content;
} }
.nav-btn { .nav-btn{
width: 100%; width: 100%;
text-align: center; text-align: center;
padding: 10px; padding: 10px;
height: 50px; 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 { .hamburger {
display: flex; /* Always show hamburger button */ display: flex;
} }
.header-login-button { .header-login-button{
right: 5vh; /* Keep login button visible */ right: 5vh;
}
.show-hide-btn{
width: fit-content;
left: 20vw;
}
.header-logo {
background-image: url(../../public/img/logo-small.png);
width: 4em;
} }
} }

BIN
public/img/logo-small.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 34 KiB