From d3fa4d47af1369ca8e4e40234e5af6f381b73c33 Mon Sep 17 00:00:00 2001
From: Niklas <198754647+BlankAccountsUsername@users.noreply.github.com>
Date: Fri, 20 Jun 2025 14:55:26 +0200
Subject: [PATCH] do headerHeight in variable, change drawer items, modify
 drawer design, add menu button cursor pointer

---
 code/frontend/src/App.css               |  1 -
 code/frontend/src/components/Header.tsx | 55 ++++++++++++-------------
 code/frontend/src/components/header.css | 23 ++++-------
 3 files changed, 35 insertions(+), 44 deletions(-)

diff --git a/code/frontend/src/App.css b/code/frontend/src/App.css
index 80f1d26..ee84f1a 100644
--- a/code/frontend/src/App.css
+++ b/code/frontend/src/App.css
@@ -41,4 +41,3 @@ footer {
     transform: rotate(360deg);
   }
 }
-
diff --git a/code/frontend/src/components/Header.tsx b/code/frontend/src/components/Header.tsx
index 7c0d56b..87f27c5 100644
--- a/code/frontend/src/components/Header.tsx
+++ b/code/frontend/src/components/Header.tsx
@@ -1,11 +1,12 @@
 import "./header.css";
-import React, { useState, useRef, useEffect } from "react";
-import { Divider, List, ListItem, ListItemButton, ListItemIcon, ListItemText, Menu, MenuItem, SwipeableDrawer } from '@mui/material';
+import React, { useState, useRef } from "react";
+import { colors, createTheme, List, ListItem, ListItemButton, ListItemIcon, ListItemText, SwipeableDrawer, ThemeProvider } from '@mui/material';
 import Box from '@mui/material/Box';
-import InboxIcon from "@mui/icons-material/Inbox";
-import MailIcon from '@mui/icons-material/Mail';
-import MenuIcon from '@mui/icons-material/Menu';
-import { Height } from "@mui/icons-material";
+import AddAPhotoIcon from '@mui/icons-material/AddAPhoto';
+import DynamicFeedIcon from '@mui/icons-material/DynamicFeed';
+import PersonIcon from '@mui/icons-material/Person';
+import InfoIcon from '@mui/icons-material/Info';
+import LogoutIcon from '@mui/icons-material/Logout';
 
 // 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
 
@@ -16,46 +17,44 @@ function Header() {
   const toggleMenu = () => {
     setIsOpen(!isOpen);
   };
-  const iconList = [InboxIcon, MailIcon, InboxIcon, MailIcon, InboxIcon, MailIcon];
+  const iconList = [DynamicFeedIcon, AddAPhotoIcon, PersonIcon, InfoIcon, LogoutIcon];
+  const routerLinksList = ["/feed","/app","/app","/app","/app"]
 
   const DrawerList = (
     <Box sx={{ width: 250 }} role="presentation" onClick={() => setIsOpen(false)}>
-      <List>
-        {["Inbox", "Starred", "Send email", "Drafts"].map((text, index) => (
-          <ListItem key={text} disablePadding>
-            <ListItemButton>
+      <ThemeProvider
+        theme={createTheme({
+          palette: {
+            mode: 'dark',
+            primary: { main: '#FFFF' },
+            background: { paper: 'rgb(5, 30, 52)' },
+          },
+        })}
+      >
+      <List sx={{height:'100vh', bgcolor: 'background.paper'}}>
+        {["Feed", "Create Post", "Profile", "About Us", "Log Out"].map((text, index) => (
+          <ListItem sx={{height: '10vh'}} key={text} disablePadding>
+            <ListItemButton sx={{height: '10vh'}} /*component={RouterLink} to={routerLinksList[index]}*/>
               <ListItemIcon>
               {React.createElement(iconList[index])}
               </ListItemIcon>
-              <ListItemText primary={text} />
-            </ListItemButton>
-          </ListItem>
-        ))}
-      </List>
-      <Divider />
-      <List>
-        {["All mail", "Trash", "Spam"].map((text, index) => (
-          <ListItem key={text} disablePadding>
-            <ListItemButton>
-              <ListItemIcon>
-                {index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
-              </ListItemIcon>
-              <ListItemText primary={text} />
+              <ListItemText primary={text} slotProps={{primary: {color: 'primary'}}}/>
             </ListItemButton>
           </ListItem>
         ))}
       </List>
+      </ThemeProvider>
     </Box>
   );
 
   return (
     <div className="outest-container" >
       <header className="base-header">
-        <div className="header-icon"> <img src='/assets/icons/feather_orange.svg' alt="featherIcon" /> </div>
+        <div className="header-icon"> <img className="header-icon-feather" src='/assets/icons/BirdIconO.ico' alt="featherIcon" /> </div>
         <p className="header-title">
-          FeatherFeed
+          Feather Feed
         </p>
-        <div className="header-icon"> {isOpen? <img src='/assets/icons/close_orange.svg' alt="close menu" ref={iconRef} onClick={toggleMenu}/> : <img src='/assets/icons/menu_orange.svg' alt="menu" onClick={toggleMenu}  />} </div>
+        <div className="header-icon header-icon-menu"> {isOpen? <img src='/assets/icons/close_orange.svg' alt="close menu" ref={iconRef} onClick={toggleMenu}/> : <img src='/assets/icons/menu_orange.svg' alt="menu" onClick={toggleMenu}  />} </div>
       </header>
       <SwipeableDrawer
       anchor={"right"}
diff --git a/code/frontend/src/components/header.css b/code/frontend/src/components/header.css
index 7ca3a9b..e7d0fe6 100644
--- a/code/frontend/src/components/header.css
+++ b/code/frontend/src/components/header.css
@@ -1,9 +1,3 @@
-:root {
-  --Rotkehlchen-gray: #e7ecf2;
-  --Rotkehlchen-brown1: #a28d7a;
-  --Rotkehlchen-orange-default: #e79a0e;
-}
-
 .outest-container {
   display: grid;
   grid-template-rows: auto auto;
@@ -13,7 +7,7 @@
 .base-header {
   width: 100vw;
   display: flex;
-  height: 50px;
+  height: var(--header-height);
   justify-content: space-between;
   align-items: center;
   flex-shrink: 0;
@@ -31,18 +25,17 @@
   flex-direction: column;
   justify-content: center;
   flex-shrink: 0;
+  font-weight: bold;
+  font-size: x-large;
 
   color: var(--Rotkehlchen-orange-default);
   text-align: center;
 }
-
-@media (min-width: 768px) {
-  .menu-container {
-    align-items: end;
-    justify-content: end;
-    width: 100%;
-    display: flex;
-  }
+.header-icon-feather {
+  height: 35px;
+}
+.header-icon-menu {
+  cursor: pointer;
 }
 
 .header-icon {