31 lines
1.2 KiB
TypeScript
31 lines
1.2 KiB
TypeScript
export const useSidebar = () => {
|
|
const open = useState<boolean>('sidebar:open', () => true)
|
|
const sidebarWidth = useState<number>('sidebar:width', () => {
|
|
return Number(useCookie('sidebar:width', { default: () => "226", maxAge: 60 * 60 * 24 * 30 }).value)
|
|
})
|
|
|
|
// I still want the state to update when the cookie change, like it does for the theme cookies
|
|
// but I dont want to use the cookie value as the state value because then when we change the
|
|
// cookie value, we thrash the hell out of the cookie and gobble CPU cycles
|
|
watch(useCookie('sidebar:width'), (value) => {
|
|
console.log(value)
|
|
sidebarWidth.value = Number(value)
|
|
})
|
|
|
|
const toggle = () => { open.value = !open.value }
|
|
const close = () => { open.value = false }
|
|
const openSidebar = () => { open.value = true }
|
|
|
|
const resize = (width: number) => {
|
|
const minWidth = 200
|
|
const maxWidth = 400
|
|
const clampedWidth = Math.max(minWidth, Math.min(maxWidth, width))
|
|
sidebarWidth.value = clampedWidth
|
|
}
|
|
|
|
const saveWidth = () => {
|
|
useCookie('sidebar:width').value = sidebarWidth.value.toString()
|
|
}
|
|
|
|
return { open, toggle, close, openSidebar, sidebarWidth: readonly(sidebarWidth), resize, saveWidth }
|
|
} |