feat: sidebar state

TinsFox · Nov 2, 2024 · c259d57 · c259d57
1 parent 72a7125
commit c259d57
Show file tree

Hide file tree

Showing 10 changed files with 15 additions and 28 deletions.
diff --git a/package.json b/package.json
@@ -70,7 +70,7 @@
     "i18next": "^23.15.1",
     "i18next-browser-languagedetector": "^8.0.0",
     "input-otp": "^1.2.4",
-    "jotai": "^2.10.0",
+    "jotai": "^2.10.1",
     "lodash-es": "^4.17.21",
     "lucide-react": "^0.429.0",
     "ofetch": "^1.4.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/store/nav.ts → src/atoms/nav.ts b/src/store/nav.ts → src/atoms/nav.ts
diff --git a/src/atoms/resizable-panels.ts b/src/atoms/resizable-panels.ts
diff --git a/src/components/nav-sidebar/nav-main.tsx b/src/components/nav-sidebar/nav-main.tsx
@@ -4,6 +4,7 @@ import { useEffect, useMemo } from "react"
 import { useTranslation } from "react-i18next"
 import { Link, useLocation } from "react-router-dom"
 
+import { navOpenItemsAtom } from "@/atoms/nav"
 import {
   Collapsible,
   CollapsibleContent,
@@ -21,7 +22,6 @@ import {
   SidebarMenuSubItem,
 } from "@/components/ui/sidebar"
 import type { IMenu } from "@/models/menu"
-import { navOpenItemsAtom } from "@/store/nav"
 
 export function NavMain({
   items,

diff --git a/src/components/ui/dropdown-menu.tsx b/src/components/ui/dropdown-menu.tsx
@@ -1,5 +1,3 @@
-"use client"
-
 import * as React from "react"
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
 import {

diff --git a/src/components/ui/sidebar.tsx b/src/components/ui/sidebar.tsx
@@ -18,8 +18,8 @@ import {
   TooltipTrigger,
 } from "@/components/ui/tooltip"
 
-const SIDEBAR_COOKIE_NAME = "sidebar:state"
-const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
+import { SIDEBAR_COOKIE_NAME } from "@/constants"
+
 const SIDEBAR_WIDTH = "16rem"
 const SIDEBAR_WIDTH_MOBILE = "18rem"
 const SIDEBAR_WIDTH_ICON = "3rem"
@@ -81,9 +81,7 @@ const SidebarProvider = React.forwardRef<
         } else {
           _setOpen(openState)
         }
-
-        // This sets the cookie to keep the sidebar state.
-        document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
+        localStorage.setItem(SIDEBAR_COOKIE_NAME, openState.toString())
       },
       [setOpenProp, open]
     )

diff --git a/src/constants/index.ts b/src/constants/index.ts
@@ -1 +1 @@
-export * from "./layout"
+export const SIDEBAR_COOKIE_NAME = "sidebar:state"
diff --git a/src/constants/layout.ts b/src/constants/layout.ts
diff --git a/src/pages/(admin)/layout.tsx b/src/pages/(admin)/layout.tsx
@@ -14,10 +14,13 @@ import {
   SidebarProvider,
   SidebarTrigger,
 } from "@/components/ui/sidebar"
+import { SIDEBAR_COOKIE_NAME } from "@/constants"
 
 export function Component() {
+  const sidebarState = localStorage.getItem(SIDEBAR_COOKIE_NAME) === "true"
+
   return (
-    <SidebarProvider>
+    <SidebarProvider defaultOpen={sidebarState}>
       <AppSidebar />
       <SidebarInset className="w-full overflow-hidden">
         <div className="sticky top-0 z-10">
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		export * from "./layout"
		export const SIDEBAR_COOKIE_NAME = "sidebar:state"