132 lines
5.2 KiB
JavaScript
132 lines
5.2 KiB
JavaScript
import React from 'react';
|
|
import {Avatar, Box, Button, Container, IconButton, Menu, MenuItem, Toolbar, Tooltip, Typography} from "@mui/material";
|
|
import MenuIcon from '@mui/icons-material/Menu';
|
|
import NavbarStyle from "./Navbar.style";
|
|
|
|
const pages = ['Products', 'Pricing', 'Blog'];
|
|
const settings = ['Profile', 'Account', 'Dashboard', 'Logout'];
|
|
|
|
function Index(props) {
|
|
const [anchorElNav, setAnchorElNav] = React.useState(null);
|
|
const [anchorElUser, setAnchorElUser] = React.useState(null);
|
|
|
|
const handleOpenNavMenu = (event) => {
|
|
setAnchorElNav(event.currentTarget);
|
|
};
|
|
const handleOpenUserMenu = (event) => {
|
|
setAnchorElUser(event.currentTarget);
|
|
};
|
|
|
|
const handleCloseNavMenu = () => {
|
|
setAnchorElNav(null);
|
|
};
|
|
|
|
const handleCloseUserMenu = () => {
|
|
setAnchorElUser(null);
|
|
};
|
|
|
|
return (
|
|
<NavbarStyle position="fixed">
|
|
<Container maxWidth="xl">
|
|
<Toolbar disableGutters>
|
|
<Typography
|
|
variant="h6"
|
|
noWrap
|
|
component="div"
|
|
sx={{ mr: 2, display: { xs: 'none', md: 'flex' } }}
|
|
>
|
|
LOGO
|
|
</Typography>
|
|
|
|
<Box sx={{ flexGrow: 1, display: { xs: 'flex', md: 'none' } }}>
|
|
<IconButton
|
|
size="large"
|
|
aria-label="account of current user"
|
|
aria-controls="menu-appbar"
|
|
aria-haspopup="true"
|
|
onClick={handleOpenNavMenu}
|
|
color="inherit"
|
|
>
|
|
<MenuIcon />
|
|
</IconButton>
|
|
<Menu
|
|
id="menu-appbar"
|
|
anchorEl={anchorElNav}
|
|
anchorOrigin={{
|
|
vertical: 'bottom',
|
|
horizontal: 'left',
|
|
}}
|
|
keepMounted
|
|
transformOrigin={{
|
|
vertical: 'top',
|
|
horizontal: 'left',
|
|
}}
|
|
open={Boolean(anchorElNav)}
|
|
onClose={handleCloseNavMenu}
|
|
sx={{
|
|
display: { xs: 'block', md: 'none' },
|
|
}}
|
|
>
|
|
{pages.map((page) => (
|
|
<MenuItem key={page} onClick={handleCloseNavMenu}>
|
|
<Typography textAlign="center">{page}</Typography>
|
|
</MenuItem>
|
|
))}
|
|
</Menu>
|
|
</Box>
|
|
<Typography
|
|
variant="h6"
|
|
noWrap
|
|
component="div"
|
|
sx={{ flexGrow: 1, display: { xs: 'flex', md: 'none' } }}
|
|
>
|
|
LOGO
|
|
</Typography>
|
|
<Box sx={{ flexGrow: 1, display: { xs: 'none', md: 'flex' } }}>
|
|
{pages.map((page) => (
|
|
<Button
|
|
key={page}
|
|
onClick={handleCloseNavMenu}
|
|
sx={{ my: 2, color: 'white', display: 'block' }}
|
|
>
|
|
{page}
|
|
</Button>
|
|
))}
|
|
</Box>
|
|
|
|
<Box sx={{ flexGrow: 0 }}>
|
|
<Tooltip title="Open settings">
|
|
<IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>
|
|
<Avatar alt="Remy Sharp" src="/static/images/avatar/2.jpg" />
|
|
</IconButton>
|
|
</Tooltip>
|
|
<Menu
|
|
sx={{ mt: '45px' }}
|
|
id="menu-appbar"
|
|
anchorEl={anchorElUser}
|
|
anchorOrigin={{
|
|
vertical: 'top',
|
|
horizontal: 'right',
|
|
}}
|
|
keepMounted
|
|
transformOrigin={{
|
|
vertical: 'top',
|
|
horizontal: 'right',
|
|
}}
|
|
open={Boolean(anchorElUser)}
|
|
onClose={handleCloseUserMenu}
|
|
>
|
|
{settings.map((setting) => (
|
|
<MenuItem key={setting} onClick={handleCloseUserMenu}>
|
|
<Typography textAlign="center">{setting}</Typography>
|
|
</MenuItem>
|
|
))}
|
|
</Menu>
|
|
</Box>
|
|
</Toolbar>
|
|
</Container>
|
|
</NavbarStyle>
|
|
);
|
|
}
|
|
|
|
export default Index; |