remove menu icon change to x icon

code/frontend/src/components/Header.tsx

@@ -1,6 +1,6 @@
 import "./header.css";
 import React, { useState, useRef } from "react";
-import { createTheme, List, ListItem, ListItemButton, ListItemIcon, ListItemText, StyledEngineProvider, SwipeableDrawer, ThemeProvider } from '@mui/material';
+import { List, ListItem, ListItemButton, ListItemIcon, ListItemText, StyledEngineProvider, SwipeableDrawer, ThemeProvider } from '@mui/material';
 import Box from '@mui/material/Box';
 import AddAPhotoIcon from '@mui/icons-material/AddAPhoto';
 import DynamicFeedIcon from '@mui/icons-material/DynamicFeed';
@@ -8,7 +8,7 @@ import PersonIcon from '@mui/icons-material/Person';
 import InfoIcon from '@mui/icons-material/Info';
 import LogoutIcon from '@mui/icons-material/Logout';
 import { Link } from "react-router-dom";
-import axios from "axios";
+import { useAuth } from "../api/Auth";
 
 // 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
 
@@ -19,17 +19,12 @@ function Header() {
   const toggleMenu = () => {
     setIsOpen(!isOpen);
   };
-  // TODO
-  const logOut = async () => {
-    try {
-    const response = await axios.delete("http://localhost:3001/api/user/logout");
-    } catch (err: any) {
-      console.error("error: ", err.response.data);
-    }
-  };
+  const { logout } = useAuth();
   const iconList = [DynamicFeedIcon, AddAPhotoIcon, PersonIcon, InfoIcon, LogoutIcon];
   const routerLinksList = ["/","/createpost","/profile","/about","/"]
 
+  // TODO: Logout nur anzeigen wenn user eingeloggt ist
+
   const DrawerList = (
     <Box role="menu" onClick={() => setIsOpen(false)}>
       <List className="drawer-list">
@@ -44,7 +39,7 @@ function Header() {
           </ListItem>
         ))}
         <ListItem className="drawer-list-item-button" key={"Log Out"} disablePadding>
-            <ListItemButton className="drawer-list-item-button" onClick={logOut}>
+            <ListItemButton className="drawer-list-item-button" onClick={logout}>
               <ListItemIcon className="drawer-list-item">
               {React.createElement(iconList[4])}
               </ListItemIcon>
@@ -62,7 +57,7 @@ function Header() {
         <p className="header-title">
           Feather Feed
         </p>
-        <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>
+        <div className="header-icon header-icon-menu"> <img src='/assets/icons/menu_orange.svg' alt="menu" onClick={toggleMenu}  /> </div>
       </header>
       <SwipeableDrawer
       anchor={"right"}

code/frontend/src/components/header.css

@@ -1,71 +1,77 @@
+:root {
+	--Rotkehlchen-gray: #e7ecf2;
+	--Rotkehlchen-brown1: #a28d7a;
+	--Rotkehlchen-orange-default: #e79a0e;
+}
+
 .base-header {
-  z-index: 10;
-  width: 100vw;
-  display: flex;
-  height: var(--header-height);
-  justify-content: space-between;
-  align-items: center;
-  flex-shrink: 0;
-  border-bottom: 3px solid var(--Rotkehlchen-brown-light);
-  background: var(--Rotkehlchen-gray);
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: 1000;
+	z-index: 10;
+	width: 100vw;
+	display: flex;
+	height: var(--header-height);
+	justify-content: space-between;
+	align-items: center;
+	flex-shrink: 0;
+	background: hsla(244, 70%, 13%, 0.71);
+	backdrop-filter: blur(8px);
+	position: fixed;
+	top: 0;
+	left: 0;
+	z-index: 1000;
 }
 @media only screen and (min-width: 768px) {
-  .base-header {
-    height: var(--header-height-desktop);
-  }
+	.base-header {
+		height: var(--header-height-desktop);
+	}
 }
 
 .header-title {
-  display: flex;
-  width: 162px;
-  height: 63px;
-  flex-direction: column;
-  justify-content: center;
-  flex-shrink: 0;
-  font-weight: bold;
-  font-size: x-large;
+	display: flex;
+	width: 162px;
+	height: 63px;
+	flex-direction: column;
+	justify-content: center;
+	flex-shrink: 0;
+	font-weight: bold;
+	font-size: x-large;
 
-  color: var(--Rotkehlchen-orange-default);
-  text-align: center;
+	color: var(--Rotkehlchen-orange-default);
+	text-align: center;
 }
 .header-icon-feather {
-  height: 35px;
+	height: 35px;
 }
 .header-icon-menu {
-  cursor: pointer;
+	cursor: pointer;
 }
 
 .header-icon {
-  margin: 40px;
-  display: flex;
-  width: 30px;
-  height: 30px;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  flex-shrink: 0;
+	margin: 40px;
+	display: flex;
+	width: 30px;
+	height: 30px;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	flex-shrink: 0;
 
-  background-size: cover;
-  background-repeat: no-repeat;
+	background-size: cover;
+	background-repeat: no-repeat;
 }
 
 .drawer-list {
-  background-color: #2f325e;
-  min-height: 100vh;
-  min-width: 13rem;
+	background-color: #12103d;
+	min-height: 100vh;
+	min-width: 13rem;
 }
 
 .drawer-list-item {
-  color: white;
+	color: white;
 }
 
 .drawer-list-item-button {
-  height: 10vh;
+	height: 10vh;
 }
 .drawer-list-item-button:hover {
-  background-color: #555b90;
+	background-color: #232451;
 }