LicenseAPI/Dashboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added the AccountMenu to the Header.jsx

Browse Source
This commit is contained in:
Mathias Wagner 2023-09-10 10:38:15 +02:00
parent 9618ca9d0f
commit 437d89d473
Signed by: Mathias
GPG Key ID: B8DC354B0A1F5B44
1 changed files with 28 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/states/Dashboard/components/Header/Header.jsx
View File

@ -1,15 +1,20 @@
import {AppBar, IconButton, Toolbar, Typography} from "@mui/material";
import {AppBar, Avatar, IconButton, Stack, Toolbar, Typography} from "@mui/material";
import {Menu} from "@mui/icons-material";
import {useContext, useEffect} from "react";
import {useContext, useEffect, useState} from "react";
import {projectSidebar, sidebar} from "@/common/routes/index.jsx";
import {useLocation} from "react-router-dom";
import {ProjectContext} from "@/states/Dashboard/contexts/Project";
import {UserContext} from "@contexts/User";
import AccountMenu from "@/states/Dashboard/components/Header/components/AccountMenu";
const drawerWidth = 260;
export const Header = ({toggleOpen}) => {
const location = useLocation();
const {currentProject} = useContext(ProjectContext);
const {user} = useContext(UserContext);
const [menuOpen, setMenuOpen] = useState(false);
useEffect(() => {
document.title = "LicenseAPI - " + getTitleByPath();
@ -23,6 +28,8 @@ export const Header = ({toggleOpen}) => {
}
return (
<>
<AccountMenu open={menuOpen} setOpen={setMenuOpen}/>
<AppBar position="fixed" sx={{width: {sm: `calc(100% - ${drawerWidth}px)`}, ml: {sm: `${drawerWidth}px`}}}
color="inherit">
<Toolbar>
@ -31,7 +38,16 @@ export const Header = ({toggleOpen}) => {
<Menu/>
</IconButton>
<Typography variant="h6" fontWeight={700}>{getTitleByPath()}</Typography>
<Stack direction="row" spacing={2} sx={{ml: "auto"}} alignItems="center">
<Stack sx={{background: "linear-gradient(90deg, #FF0401 0%, #FE6E27 100%)", padding: "3px",
borderRadius: "50%", cursor: "pointer"}} onClick={() => setMenuOpen(true)} id="menu"
alignItems="center" direction="row" spacing={1}>
<Avatar src={user.avatar} alt={user.username}/>
</Stack>
</Stack>
</Toolbar>
</AppBar>
</>
)
}