Updated the Header.jsx component

This commit is contained in:
Mathias Wagner 2024-02-15 18:26:16 +01:00
parent 6e6bbd12a7
commit 7d878ce059
Signed by: Mathias
GPG Key ID: B8DC354B0A1F5B44

View File

@ -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>