From 56e8f80245b5cfeb6f36c8d2489e341c0ec00c3a Mon Sep 17 00:00:00 2001
From: Niklas <198754647+BlankAccountsUsername@users.noreply.github.com>
Date: Tue, 20 May 2025 17:18:46 +0200
Subject: [PATCH] make header menu clickable and menu open full width

---
 code/frontend/src/components/header.tsx | 22 ++++++++++++----------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/code/frontend/src/components/header.tsx b/code/frontend/src/components/header.tsx
index e00d26b..124464f 100644
--- a/code/frontend/src/components/header.tsx
+++ b/code/frontend/src/components/header.tsx
@@ -5,29 +5,31 @@ 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() {
+  const [isOpen, setIsOpen] = useState(false);
+  
+  const toggleMenu = () => {
+    setIsOpen(isOpen? false : true);
+  };
 
   return (
+    <>
       <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"> <MenuButton/> </div>
+        <div className="base-header-icon"> <img src='/assets/icons/three_menu_stripes_black.svg' alt="x" onClick={toggleMenu}/> </div>
       </header>
+      <MenuButton isOpen={isOpen}/> 
+    </>
   );
 }
 
 
-const MenuButton: React.FC = () => {
-  const [isOpen, setIsOpen] = useState(false);
-
-  const toggleMenu = () => {
-    setIsOpen(prev => !prev);
-  };
-
+function MenuButton({isOpen}: any) {
+  
   return (
-    <div style={{ position: "relative", display: "inline-block" }}>
-      <img src="/assets/icons/three_menu_stripes_black.svg" alt="menuIcon" onClick={toggleMenu} />
+    <div style={{ position: "relative", display: "inline-block", width: "100vw"}}>
 
       {isOpen && (
         <div className="menu">