50 lines
1.4 KiB
TypeScript
50 lines
1.4 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) => {
|
|
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,
|
|
};
|
|
};
|