From 7d878ce05960ff73f0e2dc46239bceb1d62bbaae Mon Sep 17 00:00:00 2001
From: Mathias Wagner <germannewsmaker@gmail.com>
Date: Thu, 15 Feb 2024 18:26:16 +0100
Subject: [PATCH] Updated the Header.jsx component

---
 webui/src/states/Root/components/Header/Header.jsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/webui/src/states/Root/components/Header/Header.jsx b/webui/src/states/Root/components/Header/Header.jsx
index dd367b8..a4e928d 100644
--- a/webui/src/states/Root/components/Header/Header.jsx
+++ b/webui/src/states/Root/components/Header/Header.jsx
@@ -1,16 +1,17 @@
-import {AppBar, Avatar, IconButton, Stack, Toolbar, Tooltip, Typography} from "@mui/material";
+import {AppBar, Avatar, IconButton, Stack, Toolbar, Typography} from "@mui/material";
 import {Menu as MenuIcon} from "@mui/icons-material";
-import {useEffect} from "react";
+import {useEffect, useState} from "react";
 import {sidebar} from "@/common/routes/server.jsx";
 import {useLocation} from "react-router-dom";
 import {t} from "i18next";
+import AccountMenu from "@/states/Root/components/Header/components/components/AccountMenu";
 
 const drawerWidth = 240;
 
 export const Header = ({toggleOpen}) => {
     const location = useLocation();
 
-    const retrieveUsername = () => atob(localStorage.getItem("token")).split(":")[0];
+    const [menuOpen, setMenuOpen] = useState(false);
 
     useEffect(() => {
         document.title = "MCDash - " + getTitleByPath();
@@ -22,10 +23,9 @@ export const Header = ({toggleOpen}) => {
         return t("nav.server");
     }
 
-
     return (
         <AppBar position="fixed" sx={{width: {sm: `calc(100% - ${drawerWidth}px)`}, ml: {sm: `${drawerWidth}px`}}}>
-
+            <AccountMenu menuOpen={menuOpen} setMenuOpen={setMenuOpen}/>
             <Toolbar>
                 <IconButton aria-label="open drawer" edge="start" onClick={toggleOpen}
                             sx={{mr: 2, display: {sm: 'none'}}}>
@@ -34,7 +34,7 @@ export const Header = ({toggleOpen}) => {
                 <Typography variant="h6" noWrap>{getTitleByPath()}</Typography>
 
                 <Stack sx={{ml: "auto"}} direction="row">
-                    <IconButton id="menu">
+                    <IconButton id="menu" onClick={() => setMenuOpen(true)}>
                         <Avatar sx={{width: 24, height: 24}}/>
                     </IconButton>
                 </Stack>