From 446ca466c7b8e663d9555ad1132a6cb60a0d905d Mon Sep 17 00:00:00 2001
From: Jeremy Kahn <jeremyckahn@gmail.com>
Date: Wed, 15 Mar 2023 09:24:32 -0500
Subject: [PATCH] feat: default sidebars to open on wide screens

---
 src/components/Shell/Shell.tsx | 35 +++++++++++++++++++---------------
 1 file changed, 20 insertions(+), 15 deletions(-)

diff --git a/src/components/Shell/Shell.tsx b/src/components/Shell/Shell.tsx
index 37604a0..1209877 100644
--- a/src/components/Shell/Shell.tsx
+++ b/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 { useWindowSize } from '@react-hook/window-size'
 
 import { ShellContext } from 'contexts/ShellContext'
 import { SettingsContext } from 'contexts/SettingsContext'
@@ -34,8 +35,24 @@ export interface ShellProps extends PropsWithChildren {
 
 export const Shell = ({ appNeedsUpdate, children, userPeerId }: ShellProps) => {
   const { getUserSettings, updateUserSettings } = useContext(SettingsContext)
+
+  const { colorMode } = getUserSettings()
+
+  const theme = useMemo(
+    () =>
+      createTheme({
+        palette: {
+          mode: colorMode,
+        },
+      }),
+    [colorMode]
+  )
+
+  const [windowWidth] = useWindowSize()
+  const defaultSidebarsOpen = windowWidth >= theme.breakpoints.values.lg
+
   const [isAlertShowing, setIsAlertShowing] = useState(false)
-  const [isDrawerOpen, setIsDrawerOpen] = useState(false)
+  const [isDrawerOpen, setIsDrawerOpen] = useState(defaultSidebarsOpen)
   const [isQRCodeDialogOpen, setIsQRCodeDialogOpen] = useState(false)
   const [isRoomShareDialogOpen, setIsRoomShareDialogOpen] = useState(false)
   const [doShowPeers, setDoShowPeers] = useState(false)
@@ -48,7 +65,7 @@ export const Shell = ({ appNeedsUpdate, children, userPeerId }: ShellProps) => {
   const [numberOfPeers, setNumberOfPeers] = useState(1)
   const [roomId, setRoomId] = useState<string | undefined>(undefined)
   const [password, setPassword] = useState<string | undefined>(undefined)
-  const [isPeerListOpen, setIsPeerListOpen] = useState(false)
+  const [isPeerListOpen, setIsPeerListOpen] = useState(defaultSidebarsOpen)
   const [peerList, setPeerList] = useState<Peer[]>([]) // except you
   const [tabHasFocus, setTabHasFocus] = useState(true)
   const [audioState, setAudioState] = useState<AudioState>(AudioState.STOPPED)
@@ -129,18 +146,6 @@ export const Shell = ({ appNeedsUpdate, children, userPeerId }: ShellProps) => {
     ]
   )
 
-  const { colorMode } = getUserSettings()
-
-  const theme = useMemo(
-    () =>
-      createTheme({
-        palette: {
-          mode: colorMode,
-        },
-      }),
-    [colorMode]
-  )
-
   const handleAlertClose = (
     _event?: SyntheticEvent | Event,
     reason?: string
@@ -220,7 +225,7 @@ export const Shell = ({ appNeedsUpdate, children, userPeerId }: ShellProps) => {
     const handleBlur = () => {
       setTabHasFocus(false)
     }
-    const handleFullscreen = (event: Event) => {
+    const handleFullscreen = () => {
       setIsFullscreen(!!document.fullscreenElement)
     }
     window.addEventListener('focus', handleFocus)