init commit,

03_source/frontend/src/sections/mail/layout.tsx

@@ -0,0 +1,77 @@
+import type { Theme, SxProps } 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,
+}));