Niklas/shadcn-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

change: sidebar:state save in localStorage

Browse Source
This commit is contained in:
Matin Soleymani 2024-11-11 19:15:18 +03:30
parent b7ef4653f7
commit b2bd4ae3bb
2 changed files with 4 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
apps/www/src/lib/registry/default/ui/sidebar/SidebarProvider.vue
View File

@ -3,7 +3,7 @@ import { cn } from '@/lib/utils'
import { useEventListener, useVModel } from '@vueuse/core' import { useEventListener, useVModel } from '@vueuse/core'
import { TooltipProvider } from 'radix-vue' import { TooltipProvider } from 'radix-vue'
import { computed, type HTMLAttributes, type Ref, ref } from 'vue' import { computed, type HTMLAttributes, type Ref, ref } from 'vue'
import { provideSidebarContext, SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_COOKIE_NAME, SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON } from './utils' import { provideSidebarContext, SIDEBAR_STORAGE_KEY, SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON } from './utils'
const props = withDefaults(defineProps<{ const props = withDefaults(defineProps<{
defaultOpen?: boolean defaultOpen?: boolean
@ -29,8 +29,8 @@ const open = useVModel(props, 'open', emits, {
function setOpen(value: boolean) { function setOpen(value: boolean) {
open.value = value // emits('update:open', value) open.value = value // emits('update:open', value)
// This sets the cookie to keep the sidebar state. // This sets the key in localStorage to keep the sidebar state.
document.cookie = `${SIDEBAR_COOKIE_NAME}=${open.value}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}` localStorage.setItem(SIDEBAR_STORAGE_KEY , JSON.stringify(open.value));
} }
function setOpenMobile(value: boolean) { function setOpenMobile(value: boolean) {

3
apps/www/src/lib/registry/default/ui/sidebar/utils.ts
View File

@ -1,8 +1,7 @@
import type { ComputedRef, Ref } from 'vue' import type { ComputedRef, Ref } from 'vue'
import { createContext } from 'radix-vue' import { createContext } from 'radix-vue'
export const SIDEBAR_COOKIE_NAME = 'sidebar:state' export const SIDEBAR_STORAGE_KEY = 'sidebar:state'
export const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
export const SIDEBAR_WIDTH = '16rem' export const SIDEBAR_WIDTH = '16rem'
export const SIDEBAR_WIDTH_MOBILE = '18rem' export const SIDEBAR_WIDTH_MOBILE = '18rem'
export const SIDEBAR_WIDTH_ICON = '3rem' export const SIDEBAR_WIDTH_ICON = '3rem'