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

renew header

Browse source
This commit is contained in:
Niklas 2025-06-18 14:50:45 +02:00 • committed by BlankAccountsUsername
parent 22a61ad348
commit e544e9ab7e
1 changed files with 12 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,5 +1,6 @@
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
@ -21,13 +22,13 @@ function Header() {
</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>
<Menu isOpen={isOpen} toggleMenu={toggleMenu} setIsOpen={setIsOpen} iconRef={iconRef}/>
<Menu1 isOpen={isOpen} toggleMenu={toggleMenu} setIsOpen={setIsOpen} iconRef={iconRef}/>
</div>
);
}
function Menu({isOpen, toggleMenu, setIsOpen, iconRef}: any) {
function Menu1({isOpen, toggleMenu, setIsOpen, iconRef}: any) {
const menuRef = useRef<HTMLDivElement>(null);
useEffect(() => {
@ -45,16 +46,15 @@ function Menu({isOpen, toggleMenu, setIsOpen, iconRef}: any) {
return (
<div className="menu-container">
{isOpen && (
<div className="menu" ref={menuRef}>
<div className="menu-item">Home</div>
<div className="menu-item">Login</div>
<div className="menu-item">Sign up</div>
<div className="menu-item">Feed</div>
<div className="menu-item">Create Post</div>
<div className="menu-item">About</div>
</div>
)}
<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>
);
};