Merge pull request #1663 from mfts/fix/sidebar-state

fix: sidebar state

Author: mfts

components/layouts/app.tsx

@@ -1,14 +1,21 @@
-import { AppSidebar } from "@/components/sidebar/app-sidebar";
+import Cookies from "js-cookie";
 
-import { Separator } from "../ui/separator";
-import { SidebarInset, SidebarTrigger } from "../ui/sidebar";
-import { SidebarProvider } from "../ui/sidebar";
-import { AppBreadcrumb } from "./breadcrumb";
-import TrialBanner from "./trial-banner";
+import { AppBreadcrumb } from "@/components/layouts/breadcrumb";
+import TrialBanner from "@/components/layouts/trial-banner";
+import { AppSidebar } from "@/components/sidebar/app-sidebar";
+import { Separator } from "@/components/ui/separator";
+import {
+  SIDEBAR_COOKIE_NAME,
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/components/ui/sidebar";
 
 export default function AppLayout({ children }: { children: React.ReactNode }) {
+  const isSidebarOpen = Cookies.get(SIDEBAR_COOKIE_NAME) === "true";
+
   return (
-    <SidebarProvider>
+    <SidebarProvider defaultOpen={isSidebarOpen}>
       <div className="flex flex-1 flex-col gap-x-1 bg-gray-50 dark:bg-black md:flex-row">
         <AppSidebar />
         <SidebarInset className="ring-1 ring-gray-200 dark:ring-gray-800">

components/ui/sidebar.tsx

@@ -4,6 +4,9 @@ import { Slot } from "@radix-ui/react-slot";
 import { VariantProps, cva } from "class-variance-authority";
 import { PanelLeft } from "lucide-react";
 
+import { useIsMobile } from "@/lib/hooks/use-mobile";
+import { cn } from "@/lib/utils";
+
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Separator } from "@/components/ui/separator";
@@ -16,10 +19,7 @@ import {
   TooltipTrigger,
 } from "@/components/ui/tooltip";
 
-import { useIsMobile } from "@/lib/hooks/use-mobile";
-import { cn } from "@/lib/utils";
-
-const SIDEBAR_COOKIE_NAME = "sidebar:state";
+export const SIDEBAR_COOKIE_NAME = "sidebar:state";
 const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
 const SIDEBAR_WIDTH = "16rem";
 const SIDEBAR_WIDTH_MOBILE = "18rem";