110 lines
2.6 KiB
TypeScript
110 lines
2.6 KiB
TypeScript
import type { IMailLabel } from 'src/types/mail';
|
|
|
|
import Box from '@mui/material/Box';
|
|
import Stack from '@mui/material/Stack';
|
|
import Drawer from '@mui/material/Drawer';
|
|
import Button from '@mui/material/Button';
|
|
|
|
import { CONFIG } from 'src/global-config';
|
|
|
|
import { Iconify } from 'src/components/iconify';
|
|
import { Scrollbar } from 'src/components/scrollbar';
|
|
import { EmptyContent } from 'src/components/empty-content';
|
|
|
|
import { MailNavItem } from './mail-nav-item';
|
|
import { MailNavItemSkeleton } from './mail-skeleton';
|
|
|
|
// ----------------------------------------------------------------------
|
|
|
|
type Props = {
|
|
isEmpty: boolean;
|
|
openNav: boolean;
|
|
loading: boolean;
|
|
labels: IMailLabel[];
|
|
selectedLabelId: string;
|
|
onCloseNav: () => void;
|
|
onToggleCompose: () => void;
|
|
onClickLabel: (labelId: string) => void;
|
|
};
|
|
|
|
export function MailNav({
|
|
isEmpty,
|
|
loading,
|
|
labels,
|
|
openNav,
|
|
onCloseNav,
|
|
onClickLabel,
|
|
selectedLabelId,
|
|
onToggleCompose,
|
|
}: Props) {
|
|
const renderLoading = () => (
|
|
<Stack sx={{ flex: '1 1 auto', px: { xs: 2.5, md: 1.5 } }}>
|
|
<MailNavItemSkeleton />
|
|
</Stack>
|
|
);
|
|
|
|
const renderEmpty = () => (
|
|
<Stack sx={{ flex: '1 1 auto', px: { xs: 2.5, md: 1.5 } }}>
|
|
<EmptyContent
|
|
title="No labels"
|
|
imgUrl={`${CONFIG.assetsDir}/assets/icons/empty/ic-folder-empty.svg`}
|
|
/>
|
|
</Stack>
|
|
);
|
|
|
|
const renderList = () =>
|
|
isEmpty ? (
|
|
renderEmpty()
|
|
) : (
|
|
<Scrollbar sx={{ flex: '1 1 0' }}>
|
|
<nav>
|
|
<Box component="ul" sx={{ pb: 1.5, px: { xs: 1.5, md: 0.5 } }}>
|
|
{labels.map((label) => (
|
|
<MailNavItem
|
|
key={label.id}
|
|
label={label}
|
|
selected={selectedLabelId === label.id}
|
|
onClickNavItem={() => onClickLabel(label.id)}
|
|
/>
|
|
))}
|
|
</Box>
|
|
</nav>
|
|
</Scrollbar>
|
|
);
|
|
|
|
const renderContent = () => (
|
|
<>
|
|
<Box sx={(theme) => ({ p: { xs: 2.5, md: theme.spacing(2, 1.5) } })}>
|
|
<Button
|
|
fullWidth
|
|
color="inherit"
|
|
variant="contained"
|
|
startIcon={<Iconify icon="solar:pen-bold" />}
|
|
onClick={onToggleCompose}
|
|
>
|
|
Compose
|
|
</Button>
|
|
</Box>
|
|
|
|
{loading ? renderLoading() : renderList()}
|
|
</>
|
|
);
|
|
|
|
return (
|
|
<>
|
|
{renderContent()}
|
|
|
|
<Drawer
|
|
open={openNav}
|
|
onClose={onCloseNav}
|
|
slotProps={{
|
|
backdrop: { invisible: true },
|
|
paper: { sx: { width: 280 } },
|
|
}}
|
|
>
|
|
{renderContent()}
|
|
</Drawer>
|
|
</>
|
|
);
|
|
}
|