Updated the Header.jsx component
This commit is contained in:
parent
6e6bbd12a7
commit
7d878ce059
@ -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>
|
||||
|
Reference in New Issue
Block a user