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 "./header.css";
import React, { useState, useRef, useEffect } from "react"; 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 // 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> </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> <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> </header>
<Menu isOpen={isOpen} toggleMenu={toggleMenu} setIsOpen={setIsOpen} iconRef={iconRef}/> <Menu1 isOpen={isOpen} toggleMenu={toggleMenu} setIsOpen={setIsOpen} iconRef={iconRef}/>
</div> </div>
); );
} }
function Menu({isOpen, toggleMenu, setIsOpen, iconRef}: any) { function Menu1({isOpen, toggleMenu, setIsOpen, iconRef}: any) {
const menuRef = useRef<HTMLDivElement>(null); const menuRef = useRef<HTMLDivElement>(null);
useEffect(() => { useEffect(() => {
@ -45,16 +46,15 @@ function Menu({isOpen, toggleMenu, setIsOpen, iconRef}: any) {
return ( return (
<div className="menu-container"> <div className="menu-container">
{isOpen && ( <Menu
<div className="menu" ref={menuRef}>
<div className="menu-item">Home</div> open={isOpen}
<div className="menu-item">Login</div> onClose={toggleMenu}
<div className="menu-item">Sign up</div> >
<div className="menu-item">Feed</div> <MenuItem onClick={toggleMenu}>Option 1</MenuItem>
<div className="menu-item">Create Post</div> <MenuItem onClick={toggleMenu}>Option 2</MenuItem>
<div className="menu-item">About</div> <MenuItem onClick={toggleMenu}>Option 3</MenuItem>
</div> </Menu>
)}
</div> </div>
); );
}; };