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

add drawer menu

Browse source
This commit is contained in:
Niklas 2025-06-18 17:31:34 +02:00 • committed by BlankAccountsUsername
parent 6d3a1499d4
commit b0751f9f78
1 changed files with 44 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,65 +0,0 @@
import "./header.css";
import React, { useState, useRef, useEffect } from "react";
import { Menu, MenuItem } from '@mui/material';
// 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() {
const [isOpen, setIsOpen] = useState(false);
const iconRef = useRef<HTMLImageElement>(null);
const toggleMenu = () => {
setIsOpen(!isOpen);
};
return (
<div className="outest-container" >
<header className="base-header">
<div className="header-icon"> <img src='/assets/icons/feather_orange.svg' alt="featherIcon" /> </div>
<p className="header-title">
FeatherFeed
</p>
<div className="header-icon"> {isOpen? <img src='/assets/icons/close_orange.svg' alt="close menu" ref={iconRef} onClick={toggleMenu}/> : <img src='/assets/icons/menu_orange.svg' alt="menu" onClick={toggleMenu} />} </div>
</header>
<Menu1 isOpen={isOpen} toggleMenu={toggleMenu} setIsOpen={setIsOpen} iconRef={iconRef}/>
</div>
);
}
function Menu1({isOpen, toggleMenu, setIsOpen, iconRef}: any) {
const menuRef = useRef<HTMLDivElement>(null);
useEffect(() => {
function handleClickOutside(event: MouseEvent) {
if (menuRef.current && !menuRef.current.contains(event.target as Node) && !iconRef.current.contains(event.target as Node)) {
setIsOpen(false);
}
}
document.addEventListener("mousedown", handleClickOutside);
return () => {
document.removeEventListener("mousedown", handleClickOutside);
};
}, []);
return (
<div className="menu-container">
<Menu
open={isOpen}
onClose={toggleMenu}
>
<MenuItem onClick={toggleMenu}>Option 1</MenuItem>
<MenuItem onClick={toggleMenu}>Option 2</MenuItem>
<MenuItem onClick={toggleMenu}>Option 3</MenuItem>
</Menu>
</div>
);
};
// EXPORT VARIABLES
export default Header;