From 0468977072f47daabde01eab905a5c0ff7ba2ae8 Mon Sep 17 00:00:00 2001
From: Jeremy Kahn <jeremyckahn@gmail.com>
Date: Wed, 31 Aug 2022 21:44:00 -0500
Subject: [PATCH] feat: add app drawer with home button

---
 src/components/Room/Room.tsx   |   2 -
 src/components/Shell/Shell.tsx | 135 +++++++++++++++++++++++++++++++--
 2 files changed, 130 insertions(+), 7 deletions(-)

diff --git a/src/components/Room/Room.tsx b/src/components/Room/Room.tsx
index 6d382b6..eea925b 100644
--- a/src/components/Room/Room.tsx
+++ b/src/components/Room/Room.tsx
@@ -151,8 +151,6 @@ export function Room({
       className="Room"
       sx={{
         height: '100%',
-        padding: 2,
-        paddingTop: 0,
         display: 'flex',
         flexDirection: 'column',
       }}
diff --git a/src/components/Shell/Shell.tsx b/src/components/Shell/Shell.tsx
index 4be8c3a..17845b0 100644
--- a/src/components/Shell/Shell.tsx
+++ b/src/components/Shell/Shell.tsx
@@ -7,20 +7,37 @@ import {
   useState,
   SyntheticEvent,
 } from 'react'
-import AppBar from '@mui/material/AppBar'
+import { Link } from 'react-router-dom'
+import CssBaseline from '@mui/material/CssBaseline'
+import { styled, useTheme } from '@mui/material/styles'
+import MuiAppBar, { AppBarProps as MuiAppBarProps } from '@mui/material/AppBar'
+import Drawer from '@mui/material/Drawer'
 import Toolbar from '@mui/material/Toolbar'
 import Box from '@mui/material/Box'
+import List from '@mui/material/List'
 import Typography from '@mui/material/Typography'
+import Divider from '@mui/material/Divider'
 import StepIcon from '@mui/material/StepIcon'
 import Tooltip from '@mui/material/Tooltip'
 import Snackbar from '@mui/material/Snackbar'
 import MuiAlert, { AlertProps, AlertColor } from '@mui/material/Alert'
+import IconButton from '@mui/material/IconButton'
+import MenuIcon from '@mui/icons-material/Menu'
+import ChevronLeftIcon from '@mui/icons-material/ChevronLeft'
+import ChevronRightIcon from '@mui/icons-material/ChevronRight'
+import ListItem from '@mui/material/ListItem'
+import ListItemButton from '@mui/material/ListItemButton'
+import ListItemIcon from '@mui/material/ListItemIcon'
+import ListItemText from '@mui/material/ListItemText'
+import Home from '@mui/icons-material/Home'
 
 import { ShellContext } from 'ShellContext'
 import { AlertOptions } from 'models/shell'
 
 interface ShellProps extends PropsWithChildren {}
 
+const drawerWidth = 240
+
 const Alert = forwardRef<HTMLDivElement, AlertProps>(function Alert(
   props,
   ref
@@ -28,8 +45,59 @@ const Alert = forwardRef<HTMLDivElement, AlertProps>(function Alert(
   return <MuiAlert elevation={6} ref={ref} variant="filled" {...props} />
 })
 
+const Main = styled('main', { shouldForwardProp: prop => prop !== 'open' })<{
+  open?: boolean
+}>(({ theme, open }) => ({
+  flexGrow: 1,
+  padding: theme.spacing(3),
+  transition: theme.transitions.create('margin', {
+    easing: theme.transitions.easing.sharp,
+    duration: theme.transitions.duration.leavingScreen,
+  }),
+  marginLeft: `-${drawerWidth}px`,
+  ...(open && {
+    transition: theme.transitions.create('margin', {
+      easing: theme.transitions.easing.easeOut,
+      duration: theme.transitions.duration.enteringScreen,
+    }),
+    marginLeft: 0,
+  }),
+}))
+
+interface AppBarProps extends MuiAppBarProps {
+  open?: boolean
+}
+
+const AppBar = styled(MuiAppBar, {
+  shouldForwardProp: prop => prop !== 'open',
+})<AppBarProps>(({ theme, open }) => ({
+  transition: theme.transitions.create(['margin', 'width'], {
+    easing: theme.transitions.easing.sharp,
+    duration: theme.transitions.duration.leavingScreen,
+  }),
+  ...(open && {
+    width: `calc(100% - ${drawerWidth}px)`,
+    marginLeft: `${drawerWidth}px`,
+    transition: theme.transitions.create(['margin', 'width'], {
+      easing: theme.transitions.easing.easeOut,
+      duration: theme.transitions.duration.enteringScreen,
+    }),
+  }),
+}))
+
+const DrawerHeader = styled('div')(({ theme }) => ({
+  display: 'flex',
+  alignItems: 'center',
+  padding: theme.spacing(0, 1),
+  // necessary for content to be below app bar
+  ...theme.mixins.toolbar,
+  justifyContent: 'flex-end',
+}))
+
 export const Shell = ({ children }: ShellProps) => {
+  const theme = useTheme()
   const [isAlertShowing, setIsAlertShowing] = useState(false)
+  const [isDrawerOpen, setIsDrawerOpen] = useState(false)
   const [alertSeverity, setAlertSeverity] = useState<AlertColor>('info')
   const [title, setTitle] = useState('')
   const [alertText, setAlertText] = useState('')
@@ -63,14 +131,22 @@ export const Shell = ({ children }: ShellProps) => {
     document.title = title
   }, [title])
 
+  const handleDrawerOpen = () => {
+    setIsDrawerOpen(true)
+  }
+
+  const handleDrawerClose = () => {
+    setIsDrawerOpen(false)
+  }
+
   return (
     <ShellContext.Provider value={shellContextValue}>
+      <CssBaseline />
       <Box
         className="Chitchatter"
         sx={{
           height: '100vh',
           display: 'flex',
-          flexDirection: 'column',
           paddingTop: 8,
         }}
       >
@@ -88,7 +164,7 @@ export const Shell = ({ children }: ShellProps) => {
             {alertText}
           </Alert>
         </Snackbar>
-        <AppBar position="fixed">
+        <AppBar position="fixed" open={isDrawerOpen}>
           <Toolbar
             variant="regular"
             sx={{
@@ -97,13 +173,62 @@ export const Shell = ({ children }: ShellProps) => {
               justifyContent: 'space-between',
             }}
           >
-            <Typography variant="h6">{title}</Typography>
+            <IconButton
+              size="large"
+              edge="start"
+              color="inherit"
+              aria-label="menu"
+              sx={{ mr: 2, ...(isDrawerOpen && { display: 'none' }) }}
+              onClick={handleDrawerOpen}
+            >
+              <MenuIcon />
+            </IconButton>
+            <Typography variant="h6" noWrap component="div">
+              {title}
+            </Typography>
             <Tooltip title="Number of peers in the room">
               <StepIcon icon={numberOfPeers} sx={{ marginLeft: 'auto' }} />
             </Tooltip>
           </Toolbar>
         </AppBar>
-        {children}
+        <Drawer
+          sx={{
+            width: drawerWidth,
+            flexShrink: 0,
+            '& .MuiDrawer-paper': {
+              width: drawerWidth,
+              boxSizing: 'border-box',
+            },
+          }}
+          variant="persistent"
+          anchor="left"
+          open={isDrawerOpen}
+        >
+          <DrawerHeader>
+            <IconButton onClick={handleDrawerClose}>
+              {theme.direction === 'ltr' ? (
+                <ChevronLeftIcon />
+              ) : (
+                <ChevronRightIcon />
+              )}
+            </IconButton>
+          </DrawerHeader>
+          <Divider />
+          <List>
+            <Link to="/">
+              <ListItem disablePadding>
+                <ListItemButton>
+                  <ListItemIcon>
+                    <Home />
+                  </ListItemIcon>
+                  <ListItemText primary="Home" />
+                </ListItemButton>
+              </ListItem>
+            </Link>
+          </List>
+          <Divider />
+        </Drawer>
+        <Main open={isDrawerOpen}>{children}</Main>
       </Box>
     </ShellContext.Provider>
   )