update

apps/admin.saladeaula.digital/app/routes/_.$orgid/route.tsx

@@ -1,6 +1,10 @@
 import type { Route } from './+types'
 
-import { Outlet, type ShouldRevalidateFunctionArgs } from 'react-router'
+import {
+  createCookie,
+  Outlet,
+  type ShouldRevalidateFunctionArgs
+} from 'react-router'
 
 import { AppSidebar } from '@/components/app-sidebar'
 import { request as req } from '@/lib/request'
@@ -14,13 +18,14 @@ import {
   SidebarProvider,
   SidebarTrigger
 } from '@repo/ui/components/ui/sidebar'
-import { useIsMobile } from '@repo/ui/hooks/use-mobile'
 
 export const middleware: Route.MiddlewareFunction[] = [authMiddleware]
 
 export async function loader({ params, context, request }: Route.ActionArgs) {
+  const rawCookie = request.headers.get('cookie')
   const user = context.get(userContext)
 
+  const sidebarState = await createCookie('sidebar_state').parse(rawCookie)
   const r = await req({
     url: `/users/${user.sub}/orgs?limit=25`,
     request,
@@ -39,7 +44,7 @@ export async function loader({ params, context, request }: Route.ActionArgs) {
   const exists = orgs.some(({ id }) => id === params.orgid)
 
   if (exists) {
-    return { user, orgs }
+    return { user, orgs, sidebarState }
   }
 
   throw new Response(null, { status: 401 })
@@ -52,12 +57,12 @@ export function shouldRevalidate({
   return currentParams.orgid !== nextParams.orgid
 }
 
-export default function Layout({ loaderData }: Route.ComponentProps) {
-  const { user, orgs } = loaderData
-  const isMobile = useIsMobile()
+export default function Route({ loaderData }: Route.ComponentProps) {
+  const { user, orgs, sidebarState } = loaderData
+  console.log(sidebarState)
 
   return (
-    <SidebarProvider className="flex">
+    <SidebarProvider defaultOpen={sidebarState === 'true'} className="flex">
       <AppSidebar orgs={orgs} />
 
       <SidebarInset className="relative flex flex-col flex-1 min-w-0">
@@ -66,7 +71,8 @@ export default function Layout({ loaderData }: Route.ComponentProps) {
                      px-4 py-2 lg:py-4 sticky top-0 z-5"
         >
           <div className="container mx-auto flex items-center">
-            {isMobile ? <SidebarTrigger /> : <ThemedImage />}
+            <SidebarTrigger className="md:hidden" />
+            <ThemedImage className="max-md:hidden" />
 
             <div className="ml-auto flex gap-2.5 items-center">
               <ModeToggle />