veridian/app/composables/useSidebar.ts

export const useSidebar = () => {
    const open = useState<boolean>('sidebar:open', () => true);
    const sidebarWidth = useState<number>('sidebar:width', () => {
        return Number(
            useCookie('sidebar:width', {
                default: () => '250',
                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();
    };

    // Auto-close sidebar on mobile when navigating
    if (import.meta.client) {
        const mobileQuery = window.matchMedia('(max-width: 767px)');
        const route = useRoute();

        watch(() => route.path, () => {
            if (mobileQuery.matches && open.value) {
                open.value = false;
            }
        });
    }

    return {
        open: readonly(open),
        toggle,
        close,
        openSidebar,
        sidebarWidth: readonly(sidebarWidth),
        resize,
        saveWidth,
    };
};