76 lines
2.0 KiB
TypeScript
76 lines
2.0 KiB
TypeScript
import {
|
|
Avatar,
|
|
Box,
|
|
IconButton,
|
|
Toolbar as MuiToolbar,
|
|
Skeleton,
|
|
} from '@mui/material';
|
|
import { Icon } from '@rkheftan/harmony-ui';
|
|
import { HambergerMenu, Menu } from 'iconsax-react';
|
|
import type { Dispatch, SetStateAction } from 'react';
|
|
import type { UserInfo } from '@/contexts/AuthContext';
|
|
|
|
interface ToolbarProps {
|
|
sideNavOpen: boolean;
|
|
setSideNavOpen: Dispatch<SetStateAction<boolean>>;
|
|
isMobile: boolean;
|
|
user: UserInfo;
|
|
}
|
|
|
|
export const Toolbar: React.FC<ToolbarProps> = ({
|
|
sideNavOpen,
|
|
setSideNavOpen,
|
|
isMobile,
|
|
user,
|
|
loading,
|
|
}) => {
|
|
return (
|
|
<MuiToolbar
|
|
sx={{
|
|
height: (t) => t.spacing(isMobile ? 8 : 10.5),
|
|
px: isMobile ? 3 : 2,
|
|
borderBottom: (t) => `1px solid ${t.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>
|
|
<Icon Component={Menu} variant="Bold" />
|
|
</IconButton>
|
|
</Box>
|
|
</MuiToolbar>
|
|
);
|
|
};
|