From 07c1f8366aa1bbd6841184ddf279652e9790e33d Mon Sep 17 00:00:00 2001 From: sageTheDM Date: Tue, 8 Oct 2024 09:44:44 +0200 Subject: [PATCH] Header update factor 1 --- app/components/Header.tsx | 117 ++++++++++++++++++++++++-------------- app/styles/header.css | 67 ++++++++++++++-------- app/styles/responsive.css | 38 ++++++++----- 3 files changed, 139 insertions(+), 83 deletions(-) diff --git a/app/components/Header.tsx b/app/components/Header.tsx index 8a930e3..ba6b92f 100644 --- a/app/components/Header.tsx +++ b/app/components/Header.tsx @@ -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 = ({ onViewChange, showDivs, toggleDivs, showHistoryModelsToggle, showToggle }) => { - const [menuOpen, setMenuOpen] = useState(false); +const Header: React.FC = ({ + onViewChange, + showDivs, + toggleDivs, + showHistoryModelsToggle, + showToggle, +}) => { + const [menuOpen, setMenuOpen] = useState(false); + const dropdownRef = useRef(null); + const toggleRef = useRef(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 ( - <> -
-
- - - -
- -
- {/* AI logo or text */} -
-
- -
-
- - ); + // 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 ( + <> +
+ {showToggle && showHistoryModelsToggle && ( + + )} + +
+ + + +
+
+ {/* AI logo or text */} +
+
+ +
+
+ + ); }; export default Header; diff --git a/app/styles/header.css b/app/styles/header.css index 9f30d31..53f536c 100644 --- a/app/styles/header.css +++ b/app/styles/header.css @@ -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); -} \ No newline at end of file +} + +.show-hide-btn{ + width: fit-content; + align-self: left; +} diff --git a/app/styles/responsive.css b/app/styles/responsive.css index ae65dfd..d09d21a 100644 --- a/app/styles/responsive.css +++ b/app/styles/responsive.css @@ -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 */ } }