fix: add mobile sidebar state

Author: lxup

src/components/ui/sidebar.tsx

@@ -35,9 +35,9 @@ const SIDEBAR_KEYBOARD_SHORTCUT = "b"
 type SidebarContextProps = {
   state: "expanded" | "collapsed"
   open: boolean
-  setOpen: (open: boolean) => void
+  setOpen: React.Dispatch<React.SetStateAction<boolean>>
   openMobile: boolean
-  setOpenMobile: (open: boolean) => void
+  setOpenMobile: React.Dispatch<React.SetStateAction<boolean>>
   isMobile: boolean
   toggleSidebar: () => void
 }
@@ -57,6 +57,8 @@ function SidebarProvider({
   defaultOpen = true,
   open: openProp,
   onOpenChange: setOpenProp,
+  openMobile: openMobileProp,
+  setOpenMobile: setOpenMobileProp,
   className,
   style,
   children,
@@ -67,11 +69,26 @@ function SidebarProvider({
   defaultOpen?: boolean
   open?: boolean
   onOpenChange?: (open: boolean) => void
+  openMobile?: boolean
+  setOpenMobile?: (open: boolean) => void
   shortcut?: string
   noLayout?: boolean
 }) {
   const isMobile = useIsMobile()
-  const [openMobile, setOpenMobile] = React.useState(false)
+  const [_openMobile, _setOpenMobile] = React.useState(false)
+
+  const openMobile = openMobileProp ?? _openMobile
+  const setOpenMobile = React.useCallback(
+    (value: boolean | ((value: boolean) => boolean)) => {
+      const mobileOpenState = typeof value === "function" ? value(openMobile) : value
+      if (setOpenMobileProp) {
+        setOpenMobileProp(mobileOpenState)
+      } else {
+        _setOpenMobile(mobileOpenState)
+      }
+    },
+    [setOpenMobileProp, openMobile]
+  )
 
   // This is the internal state of the sidebar.
   // We use openProp and setOpenProp for control from outside the component.

src/layouts/app-layout/AppLayout.tsx

@@ -27,8 +27,8 @@ export function AppLayout({
 		<SidebarProvider
 		open={sidebarOpen}
 		onOpenChange={sidebarOpenChange}
-		// openMobile={sidebarOpenMobile}
-		// setOpenMobile={setSidebarOpenMobile}
+		openMobile={sidebarOpenMobile}
+		setOpenMobile={setSidebarOpenMobile}
 		className="min-h-screen"
 		>
 			<SidebarLeft />
@@ -39,12 +39,10 @@ export function AppLayout({
 			<SidebarProvider
 			open={rightPanelOpen}
 			onOpenChange={rightPanelOpenChange}
-			// noLayout
 			className='w-auto'
 			shortcut='p'
-			// openMobile={rightPanelOpenMobile}
-			// setOpenMobile={setRightPanelOpenMobile}
-			// noLayout
+			openMobile={rightPanelOpenMobile}
+			setOpenMobile={setRightPanelOpenMobile}
 			>
 				<SidebarRight />
 			</SidebarProvider>