85 lines
2.5 KiB
TypeScript
85 lines
2.5 KiB
TypeScript
import { Avatar, Box, IconButton, Toolbar as MuiToolbar } from '@mui/material';
|
|
import { Icon } from '@rkheftan/harmony-ui';
|
|
import { HambergerMenu, Menu } from 'iconsax-react';
|
|
import { useState, type Dispatch, type SetStateAction } from 'react';
|
|
import type { UserInfo } from '@/contexts/AuthContext';
|
|
import Logo from '../Logo';
|
|
import ProductsMenu from './ProductsMenu';
|
|
|
|
interface ToolbarProps {
|
|
sideNavOpen: boolean;
|
|
setSideNavOpen: Dispatch<SetStateAction<boolean>>;
|
|
isMobile: boolean;
|
|
user: UserInfo;
|
|
}
|
|
|
|
export const Toolbar: React.FC<ToolbarProps> = ({
|
|
sideNavOpen,
|
|
setSideNavOpen,
|
|
isMobile,
|
|
user,
|
|
}) => {
|
|
const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
|
|
const open = Boolean(anchorEl);
|
|
|
|
const handleClick = (event: React.MouseEvent<HTMLElement>) => {
|
|
event.stopPropagation();
|
|
setAnchorEl(event.currentTarget);
|
|
};
|
|
|
|
const handleClose = () => {
|
|
setAnchorEl(null);
|
|
};
|
|
|
|
return (
|
|
<MuiToolbar
|
|
sx={{
|
|
height: (t) => t.spacing(isMobile ? 8 : 10.5),
|
|
bgcolor: 'background.paper',
|
|
px: isMobile ? 3 : 2,
|
|
borderBottom: `1px solid var(--mui-palette-divider)`,
|
|
boxSizing: 'content-box',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'space-between',
|
|
}}
|
|
>
|
|
<Box
|
|
sx={{ display: 'flex', height: '100%', alignItems: 'center', gap: 2 }}
|
|
>
|
|
{isMobile && (
|
|
<IconButton
|
|
sx={{
|
|
backgroundColor: sideNavOpen ? 'primary.light' : undefined,
|
|
color: sideNavOpen ? 'primary.main' : undefined,
|
|
'&:hover': {
|
|
backgroundColor: sideNavOpen ? 'primary.light' : undefined,
|
|
},
|
|
}}
|
|
onClick={() => setSideNavOpen(!sideNavOpen)}
|
|
>
|
|
<Icon Component={HambergerMenu} />
|
|
</IconButton>
|
|
)}
|
|
<Logo />
|
|
</Box>
|
|
<Box
|
|
sx={{ display: 'flex', height: '100%', alignItems: 'center', gap: 1 }}
|
|
>
|
|
{isMobile && (
|
|
<Avatar
|
|
sx={{ width: 32, height: 32, fontSize: '14px' }}
|
|
src={user.picture}
|
|
>
|
|
{user.firstName.charAt(0) + ' ' + user.lastName.charAt(0)}
|
|
</Avatar>
|
|
)}
|
|
<IconButton color="primary" onClick={handleClick}>
|
|
<Icon Component={Menu} variant="Bold" />
|
|
</IconButton>
|
|
</Box>
|
|
<ProductsMenu anchorEl={anchorEl} onClose={handleClose} open={open} />
|
|
</MuiToolbar>
|
|
);
|
|
};
|