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

wip add menü

Browse source
This commit is contained in:
Niklas 2025-05-15 18:28:22 +02:00 • committed by BlankAccountsUsername
parent b868bdb599
commit e2705f2b0e
1 changed files with 32 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,6 +1,9 @@
import "./header.css";
import "./Header.css";
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
function Header() {
return (
@ -9,9 +12,35 @@ function Header() {
<p className="header-title small-title">
Feather Feed
</p>
<div className="base-header-icon"> <img src="/assets/icons/three_menu_stripes_black.svg" alt="menuIcon" /> </div>
<div className="base-header-icon"> <MenuButton/> </div>
</header>
);
}
export default Header;
const MenuButton: React.FC = () => {
const [isOpen, setIsOpen] = useState(false);
const toggleMenu = () => {
setIsOpen(prev => !prev);
};
return (
<div style={{ position: "relative", display: "inline-block" }}>
<img src="/assets/icons/three_menu_stripes_black.svg" alt="menuIcon" onClick={toggleMenu} />
{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>
)}
</div>
);
};
// EXPORT VARIABLES
export default Header;