Mathias/MCDashWrapper
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updated the Header.jsx component

Browse Source
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
1 changed files with 6 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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