77 lines
2.1 KiB
TypeScript
77 lines
2.1 KiB
TypeScript
import type { SxProps, Theme } from '@mui/material/styles';
|
|
import { styled } from '@mui/material/styles';
|
|
|
|
// ----------------------------------------------------------------------
|
|
|
|
type MailLayoutProps = React.ComponentProps<'div'> & {
|
|
sx?: SxProps<Theme>;
|
|
slots: {
|
|
nav: React.ReactNode;
|
|
list: React.ReactNode;
|
|
header: React.ReactNode;
|
|
details: React.ReactNode;
|
|
};
|
|
slotProps?: {
|
|
nav?: React.ComponentProps<typeof LayoutNav>;
|
|
list?: React.ComponentProps<typeof LayoutList>;
|
|
details?: React.ComponentProps<typeof LayoutDetails>;
|
|
container?: React.ComponentProps<typeof LayoutContainer>;
|
|
};
|
|
};
|
|
|
|
export function MailLayout({ slots, slotProps, sx, ...other }: MailLayoutProps) {
|
|
return (
|
|
<LayoutRoot sx={sx} {...other}>
|
|
{slots.header}
|
|
|
|
<LayoutContainer {...slotProps?.container}>
|
|
<LayoutNav {...slotProps?.nav}>{slots.nav}</LayoutNav>
|
|
<LayoutList {...slotProps?.list}>{slots.list}</LayoutList>
|
|
<LayoutDetails {...slotProps?.details}>{slots.details}</LayoutDetails>
|
|
</LayoutContainer>
|
|
</LayoutRoot>
|
|
);
|
|
}
|
|
|
|
// ----------------------------------------------------------------------
|
|
|
|
const LayoutRoot = styled('div')(() => ({
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
}));
|
|
|
|
const LayoutContainer = styled('div')(({ theme }) => ({
|
|
gap: theme.spacing(1),
|
|
display: 'flex',
|
|
flex: '1 1 auto',
|
|
overflow: 'hidden',
|
|
}));
|
|
|
|
const LayoutNav = styled('div')(({ theme }) => ({
|
|
display: 'none',
|
|
flex: '0 0 200px',
|
|
overflow: 'hidden',
|
|
flexDirection: 'column',
|
|
[theme.breakpoints.up('md')]: { display: 'flex' },
|
|
}));
|
|
|
|
const LayoutList = styled('div')(({ theme }) => ({
|
|
display: 'none',
|
|
flex: '0 0 320px',
|
|
overflow: 'hidden',
|
|
flexDirection: 'column',
|
|
borderRadius: theme.shape.borderRadius * 1.5,
|
|
backgroundColor: theme.vars.palette.background.default,
|
|
[theme.breakpoints.up('md')]: { display: 'flex' },
|
|
}));
|
|
|
|
const LayoutDetails = styled('div')(({ theme }) => ({
|
|
minWidth: 0,
|
|
display: 'flex',
|
|
flex: '1 1 auto',
|
|
overflow: 'hidden',
|
|
flexDirection: 'column',
|
|
borderRadius: theme.shape.borderRadius * 1.5,
|
|
backgroundColor: theme.vars.palette.background.default,
|
|
}));
|