From c259d570c104c699ec226b3b91cb32df7b99a9c1 Mon Sep 17 00:00:00 2001 From: TinsFox Date: Sat, 2 Nov 2024 23:56:09 +0800 Subject: [PATCH] feat: sidebar state --- package.json | 2 +- pnpm-lock.yaml | 10 +++++----- src/{store => atoms}/nav.ts | 0 src/atoms/resizable-panels.ts | 10 ---------- src/components/nav-sidebar/nav-main.tsx | 2 +- src/components/ui/dropdown-menu.tsx | 2 -- src/components/ui/sidebar.tsx | 8 +++----- src/constants/index.ts | 2 +- src/constants/layout.ts | 2 -- src/pages/(admin)/layout.tsx | 5 ++++- 10 files changed, 15 insertions(+), 28 deletions(-) rename src/{store => atoms}/nav.ts (100%) delete mode 100644 src/atoms/resizable-panels.ts delete mode 100644 src/constants/layout.ts diff --git a/package.json b/package.json index bc884e8..89067ee 100644 --- 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 index 571f86e..c2953c8 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -132,8 +132,8 @@ importers: specifier: ^1.2.4 version: 1.2.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1) jotai: - specifier: ^2.10.0 - version: 2.10.0(@types/react@18.3.8)(react@18.3.1) + specifier: ^2.10.1 + version: 2.10.1(@types/react@18.3.8)(react@18.3.1) lodash-es: specifier: ^4.17.21 version: 4.17.21 @@ -4792,8 +4792,8 @@ packages: resolution: {integrity: sha512-c+PHQZakiQuMKbnhvrjZUvrK6E/AfmTOf4P+E3Y4FNVHcNMX9e/XrnbEvO+m4wS6ZjsvhHh/POQTlfy8uXFc0A==} hasBin: true - jotai@2.10.0: - resolution: {integrity: sha512-8W4u0aRlOIwGlLQ0sqfl/c6+eExl5D8lZgAUolirZLktyaj4WnxO/8a0HEPmtriQAB6X5LMhXzZVmw02X0P0qQ==} + jotai@2.10.1: + resolution: {integrity: sha512-4FycO+BOTl2auLyF2Chvi6KTDqdsdDDtpaL/WHQMs8f3KS1E3loiUShQzAzFA/sMU5cJ0hz/RT1xum9YbG/zaA==} engines: {node: '>=12.20.0'} peerDependencies: '@types/react': '>=17.0.0' @@ -12155,7 +12155,7 @@ snapshots: jiti@2.0.0-beta.2: {} - jotai@2.10.0(@types/react@18.3.8)(react@18.3.1): + jotai@2.10.1(@types/react@18.3.8)(react@18.3.1): optionalDependencies: '@types/react': 18.3.8 react: 18.3.1 diff --git a/src/store/nav.ts b/src/atoms/nav.ts similarity index 100% rename from src/store/nav.ts rename to src/atoms/nav.ts diff --git a/src/atoms/resizable-panels.ts b/src/atoms/resizable-panels.ts deleted file mode 100644 index 5d3aeb8..0000000 --- a/src/atoms/resizable-panels.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { atomWithStorage } from "jotai/utils" - -import { DEFAULT_LAYOUT } from "@/constants" - -export const layoutAtom = atomWithStorage( - "layout", - JSON.stringify(DEFAULT_LAYOUT), -) - -export const isCollapsedAtom = atomWithStorage("collapsed", false) diff --git a/src/components/nav-sidebar/nav-main.tsx b/src/components/nav-sidebar/nav-main.tsx index 62fca62..48cea86 100644 --- 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 index 46cbfd8..61eadd5 100644 --- 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 index 4b0e83e..f29827b 100644 --- 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 index 7a1385f..a74b3a1 100644 --- 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 deleted file mode 100644 index 1aa28fb..0000000 --- a/src/constants/layout.ts +++ /dev/null @@ -1,2 +0,0 @@ -export const NAV_COLLAPSED_SIZE = 4 -export const DEFAULT_LAYOUT = [15, 80] diff --git a/src/pages/(admin)/layout.tsx b/src/pages/(admin)/layout.tsx index 52cc4bb..91bfe07 100644 --- 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 ( - +