refactor(shell): move MuiDrawer out of PeerList

src/components/Shell/PeerList.tsx

@@ -1,6 +1,5 @@
 import { PropsWithChildren } from 'react'
 import { Route, Routes } from 'react-router-dom'
-import MuiDrawer from '@mui/material/Drawer'
 import List from '@mui/material/List'
 import ListItemIcon from '@mui/material/ListItemIcon'
 import ListItemText from '@mui/material/ListItemText'
@@ -28,7 +27,6 @@ export const peerListWidth = 300
 export interface PeerListProps extends PropsWithChildren {
   userId: string
   roomId: string | undefined
-  isPeerListOpen: boolean
   onPeerListClose: () => void
   peerList: Peer[]
   peerConnectionTypes: Record<string, PeerConnectionType>
@@ -40,7 +38,6 @@ export interface PeerListProps extends PropsWithChildren {
 export const PeerList = ({
   userId,
   roomId,
-  isPeerListOpen,
   onPeerListClose,
   peerList,
   peerConnectionTypes,
@@ -49,23 +46,7 @@ export const PeerList = ({
   connectionTestResults,
 }: PeerListProps) => {
   return (
-    <MuiDrawer
+    <>
-      sx={{
-        flexShrink: 0,
-        pointerEvents: 'none',
-        width: peerListWidth,
-        '& .MuiDrawer-paper': {
-          width: peerListWidth,
-          boxSizing: 'border-box',
-        },
-        ...(isPeerListOpen && {
-          pointerEvents: 'auto',
-        }),
-      }}
-      variant="persistent"
-      anchor="right"
-      open={isPeerListOpen}
-    >
       <PeerListHeader>
         <IconButton onClick={onPeerListClose} aria-label="Close peer list">
           <ChevronRightIcon />
@@ -132,6 +113,6 @@ export const PeerList = ({
           </>
         ) : null}
       </List>
-    </MuiDrawer>
+    </>
   )
 }

src/components/Shell/Shell.tsx

@@ -11,6 +11,7 @@ import CssBaseline from '@mui/material/CssBaseline'
 import { ThemeProvider, createTheme } from '@mui/material/styles'
 import Box from '@mui/material/Box'
 import { AlertColor } from '@mui/material/Alert'
+import MuiDrawer from '@mui/material/Drawer'
 import { useWindowSize } from '@react-hook/window-size'
 
 import { ShellContext } from 'contexts/ShellContext'
@@ -26,7 +27,7 @@ import { UpgradeDialog } from './UpgradeDialog'
 import { ShellAppBar } from './ShellAppBar'
 import { NotificationArea } from './NotificationArea'
 import { RouteContent } from './RouteContent'
-import { PeerList } from './PeerList'
+import { PeerList, peerListWidth } from './PeerList'
 import { QRCodeDialog } from './QRCodeDialog'
 import { RoomShareDialog } from './RoomShareDialog'
 import { useConnectionTest } from './useConnectionTest'
@@ -366,10 +367,26 @@ export const Shell = ({ appNeedsUpdate, children, userPeerId }: ShellProps) => {
               >
                 <ErrorBoundary>{children}</ErrorBoundary>
               </RouteContent>
+              <MuiDrawer
+                sx={{
+                  flexShrink: 0,
+                  pointerEvents: 'none',
+                  width: peerListWidth,
+                  '& .MuiDrawer-paper': {
+                    width: peerListWidth,
+                    boxSizing: 'border-box',
+                  },
+                  ...(isPeerListOpen && {
+                    pointerEvents: 'auto',
+                  }),
+                }}
+                variant="persistent"
+                anchor="right"
+                open={isPeerListOpen}
+              >
                 <PeerList
                   userId={userPeerId}
                   roomId={roomId}
-                isPeerListOpen={isPeerListOpen}
                   onPeerListClose={handlePeerListClick}
                   peerList={peerList}
                   peerConnectionTypes={peerConnectionTypes}
@@ -377,6 +394,7 @@ export const Shell = ({ appNeedsUpdate, children, userPeerId }: ShellProps) => {
                   peerAudios={peerAudios}
                   connectionTestResults={connectionTestResults}
                 />
+              </MuiDrawer>
               <QRCodeDialog
                 isOpen={isQRCodeDialogOpen}
                 handleClose={handleQRCodeDialogClose}