refactor(shell): de-DRY DrawerHeader

src/components/Shell/Drawer.tsx

@@ -1,6 +1,7 @@
 import { PropsWithChildren, useContext } from 'react'
 import { Link } from 'react-router-dom'
 import { Theme } from '@mui/material/styles'
+import Box from '@mui/material/Box'
 import MuiDrawer from '@mui/material/Drawer'
 import List from '@mui/material/List'
 import MuiLink from '@mui/material/Link'
@@ -24,8 +25,6 @@ import GitInfo from 'react-git-info/macro'
 import { routes } from 'config/routes'
 import { SettingsContext } from 'contexts/SettingsContext'
 
-import { DrawerHeader } from './DrawerHeader'
-
 const { commit } = GitInfo()
 
 export const drawerWidth = 240
@@ -59,7 +58,16 @@ export const Drawer = ({ isDrawerOpen, onDrawerClose, theme }: DrawerProps) => {
       anchor="left"
       open={isDrawerOpen}
     >
-      <DrawerHeader>
+      <Box
+        sx={theme => ({
+          display: 'flex',
+          alignItems: 'center',
+          padding: theme.spacing(0, 1),
+          // necessary for drawer content to be pushed below app bar
+          ...theme.mixins.toolbar,
+          justifyContent: 'flex-end',
+        })}
+      >
         <IconButton onClick={onDrawerClose} aria-label="Close menu">
           {theme.direction === 'ltr' ? (
             <ChevronLeftIcon />
@@ -67,7 +75,7 @@ export const Drawer = ({ isDrawerOpen, onDrawerClose, theme }: DrawerProps) => {
             <ChevronRightIcon />
           )}
         </IconButton>
-      </DrawerHeader>
+      </Box>
       <Divider />
       <List role="navigation">
         <Link to={routes.ROOT}>

src/components/Shell/DrawerHeader.tsx

@@ -1,10 +0,0 @@
-import { styled } from '@mui/material/styles'
-
-export 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',
-}))

src/components/Shell/RouteContent.tsx

@@ -3,11 +3,10 @@ import Box from '@mui/material/Box'
 import Collapse from '@mui/material/Collapse'
 import { styled } from '@mui/material/styles'
 
-import { DrawerHeader } from './DrawerHeader'
 import { drawerWidth } from './Drawer'
 import { peerListWidth } from './PeerList'
 
-const Main = styled('main', {
+const StyledMain = styled('main', {
   shouldForwardProp: prop =>
     prop !== 'isDrawerOpen' && prop !== 'isPeerListOpen',
 })<{
@@ -49,7 +48,7 @@ export const RouteContent = ({
   showAppBar,
 }: RouteContentProps) => {
   return (
-    <Main
+    <StyledMain
       isDrawerOpen={isDrawerOpen}
       isPeerListOpen={isPeerListOpen}
       sx={{
@@ -58,10 +57,17 @@ export const RouteContent = ({
         width: '100%',
       }}
     >
+      {/*
+      This Collapse acts as a spacer to allow the controls to hide behind the AppBar.
+      */}
       <Collapse in={showAppBar} sx={{ flex: 'none' }}>
-        <DrawerHeader />
+        <Box
+          sx={theme => ({
+            ...theme.mixins.toolbar,
+          })}
+        />
       </Collapse>
       <Box sx={{ overflow: 'auto', flexGrow: 1 }}>{children}</Box>
-    </Main>
+    </StyledMain>
   )
 }