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

make it better

Browse source
This commit is contained in:
Niklas 2025-05-21 17:40:55 +02:00
parent 6b999dc49d
commit c01c55c2d7
3 changed files with 50 additions and 15 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,41 +1,58 @@
import "./Header.css";
import React, { useState } from "react";
import React, { useState, useRef, useEffect } 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
function Header() {
const [isOpen, setIsOpen] = useState(false);
const iconRef = useRef<HTMLImageElement>(null);
const toggleMenu = () => {
setIsOpen(isOpen? false : true);
setIsOpen(!isOpen);
};
return (
<>
<div className="outest-container" >
<header className="base-header">
<div className="base-header-icon"> <img src='/assets/icons/feather_black.svg' alt="featherIcon" /> </div>
<p className="header-title small-title">
Feather Feed
</p>
<div className="base-header-icon"> <img src='/assets/icons/three_menu_stripes_black.svg' alt="x" onClick={toggleMenu}/> </div>
<div className="header-icon"> {isOpen? <img src='/assets/icons/x.svg' alt="x" ref={iconRef} onClick={toggleMenu}/> : <img src='/assets/icons/three_menu_stripes_black.svg' alt="x" onClick={toggleMenu} />} </div>
</header>
<MenuButton isOpen={isOpen}/>
</>
<Menu isOpen={isOpen} toggleMenu={toggleMenu} setIsOpen={setIsOpen} iconRef={iconRef}/>
</div>
);
}
function MenuButton({isOpen}: any) {
return (
<div style={{ position: "relative", display: "inline-block", width: "100vw"}}>
function Menu({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">
{isOpen && (
<div className="menu">
<div style={{ padding: "8px", cursor: "pointer" }}>🔧 Einstellung</div>
<div style={{ padding: "8px", cursor: "pointer" }}>📁 Öffnen</div>
<div style={{ padding: "8px", cursor: "pointer" }}>❌ Schließen</div>
<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>
)}
</div>