From c01c55c2d744ebd6bc7e6cf49d12fe80da839543 Mon Sep 17 00:00:00 2001
From: Niklas <198754647+BlankAccountsUsername@users.noreply.github.com>
Date: Wed, 21 May 2025 17:40:55 +0200
Subject: [PATCH] make it better

---
 code/frontend/public/assets/icons/x.svg |  3 ++
 code/frontend/src/components/header.css | 17 +++++++++-
 code/frontend/src/components/header.tsx | 45 +++++++++++++++++--------
 3 files changed, 50 insertions(+), 15 deletions(-)
 create mode 100644 code/frontend/public/assets/icons/x.svg

diff --git a/code/frontend/public/assets/icons/x.svg b/code/frontend/public/assets/icons/x.svg
new file mode 100644
index 0000000..6918b9d
--- /dev/null
+++ b/code/frontend/public/assets/icons/x.svg
@@ -0,0 +1,3 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M30 10L10 30M10 10L30 30" stroke="#1E1E1E" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/code/frontend/src/components/header.css b/code/frontend/src/components/header.css
index 17cd425..7ca3a9b 100644
--- a/code/frontend/src/components/header.css
+++ b/code/frontend/src/components/header.css
@@ -4,6 +4,12 @@
   --Rotkehlchen-orange-default: #e79a0e;
 }
 
+.outest-container {
+  display: grid;
+  grid-template-rows: auto auto;
+  grid-template-columns: 1fr; /* 1 Spalte */
+  align-content: end;
+}
 .base-header {
   width: 100vw;
   display: flex;
@@ -30,7 +36,16 @@
   text-align: center;
 }
 
-.base-header-icon {
+@media (min-width: 768px) {
+  .menu-container {
+    align-items: end;
+    justify-content: end;
+    width: 100%;
+    display: flex;
+  }
+}
+
+.header-icon {
   margin: 40px;
   display: flex;
   width: 30px;
diff --git a/code/frontend/src/components/header.tsx b/code/frontend/src/components/header.tsx
index 124464f..68d081a 100644
--- a/code/frontend/src/components/header.tsx
+++ b/code/frontend/src/components/header.tsx
@@ -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>