do headerHeight in variable, change drawer items, modify drawer design, add menu button cursor pointer

code/frontend/src/App.css

@@ -41,4 +41,3 @@ footer {
     transform: rotate(360deg);
   }
 }
-

code/frontend/src/components/Header.tsx

@@ -1,11 +1,12 @@
 import "./header.css";
-import React, { useState, useRef, useEffect } from "react";
+import React, { useState, useRef } from "react";
-import { Divider, List, ListItem, ListItemButton, ListItemIcon, ListItemText, Menu, MenuItem, SwipeableDrawer } from '@mui/material';
+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 AddAPhotoIcon from '@mui/icons-material/AddAPhoto';
-import MailIcon from '@mui/icons-material/Mail';
+import DynamicFeedIcon from '@mui/icons-material/DynamicFeed';
-import MenuIcon from '@mui/icons-material/Menu';
+import PersonIcon from '@mui/icons-material/Person';
-import { Height } from "@mui/icons-material";
+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>
+      <ThemeProvider
-        {["Inbox", "Starred", "Send email", "Drafts"].map((text, index) => (
+        theme={createTheme({
-          <ListItem key={text} disablePadding>
+          palette: {
-            <ListItemButton>
+            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} />
+              <ListItemText primary={text} slotProps={{primary: {color: 'primary'}}}/>
-            </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} />
             </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"}

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;
 }
-
+.header-icon-feather {
-@media (min-width: 768px) {
+  height: 35px;
-  .menu-container {
+}
-    align-items: end;
+.header-icon-menu {
-    justify-content: end;
+  cursor: pointer;
-    width: 100%;
-    display: flex;
-  }
 }
 
 .header-icon {