wip add menü

code/frontend/src/components/header.tsx

@@ -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>
   );
 }
 
+
+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;