feat: Add Layout with AppBar and Drawer

packages/web/src/components/Drawer/index.tsx

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import { DrawerProps } from '@mui/material/Drawer';
+import Toolbar from '@mui/material/Toolbar';
+import List from '@mui/material/List';
+import Divider from '@mui/material/Divider';
+import ListItem from '@mui/material/ListItem';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import InboxIcon from '@mui/icons-material/MoveToInbox';
+import MailIcon from '@mui/icons-material/Mail';
+
+import HideOnScroll from 'components/HideOnScroll';
+import { Drawer as BaseDrawer } from './style';
+
+export default function Drawer(props: DrawerProps) {
+  return (
+    <BaseDrawer
+      {...props}
+      variant="permanent"
+    >
+      <HideOnScroll unmountOnExit>
+        <Toolbar />
+      </HideOnScroll>
+      <List>
+        {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => (
+          <ListItem button key={text}>
+            <ListItemIcon>
+              {index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
+            </ListItemIcon>
+            <ListItemText primary={text} />
+          </ListItem>
+        ))}
+      </List>
+      <Divider />
+      <List>
+        {['All mail', 'Trash', 'Spam'].map((text, index) => (
+          <ListItem button key={text}>
+            <ListItemIcon>
+              {index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
+            </ListItemIcon>
+            <ListItemText primary={text} />
+          </ListItem>
+        ))}
+      </List>
+    </BaseDrawer>
+  );
+}