mirrors/VogelSocialMedia
1
0
Fork 0
mirror of https://github.com/bubblecup-12/VogelSocialMedia.git synced 2025-07-06 15:18:48 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

make header menu clickable and menu open full width

Browse source
This commit is contained in:
Niklas 2025-05-20 17:18:46 +02:00 • committed by BlankAccountsUsername
parent e2705f2b0e
commit 56e8f80245
1 changed files with 12 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

20
code/frontend/src/components/header.tsx
View file

@ -5,29 +5,31 @@ import React, { useState } from "react";
// TODO: Dinge so umstrukturieren, dass der State für das offene menü in Header ist und das Menü auch in Header, sodass es mit width 100% die volle breite einnehmen kann // TODO: Dinge so umstrukturieren, dass der State für das offene menü in Header ist und das Menü auch in Header, sodass es mit width 100% die volle breite einnehmen kann
function Header() { function Header() {
const [isOpen, setIsOpen] = useState(false);
const toggleMenu = () => {
setIsOpen(isOpen? false : true);
};
return ( return (
<>
<header className="base-header"> <header className="base-header">
<div className="base-header-icon"> <img src='/assets/icons/feather_black.svg' alt="featherIcon" /> </div> <div className="base-header-icon"> <img src='/assets/icons/feather_black.svg' alt="featherIcon" /> </div>
<p className="header-title small-title"> <p className="header-title small-title">
Feather Feed Feather Feed
</p> </p>
<div className="base-header-icon"> <MenuButton/> </div> <div className="base-header-icon"> <img src='/assets/icons/three_menu_stripes_black.svg' alt="x" onClick={toggleMenu}/> </div>
</header> </header>
<MenuButton isOpen={isOpen}/>
</>
); );
} }
const MenuButton: React.FC = () => { function MenuButton({isOpen}: any) {
const [isOpen, setIsOpen] = useState(false);
const toggleMenu = () => {
setIsOpen(prev => !prev);
};
return ( return (
<div style={{ position: "relative", display: "inline-block" }}> <div style={{ position: "relative", display: "inline-block", width: "100vw"}}>
<img src="/assets/icons/three_menu_stripes_black.svg" alt="menuIcon" onClick={toggleMenu} />
{isOpen && ( {isOpen && (
<div className="menu"> <div className="menu">