/* Shared collapse state for the site sidebar. The choice is remembered in
   localStorage, and the flag is also set on <html> so the fixed reading
   surface (--sidebar-w) and the rail itself follow it together. Mobile's
   top bar is always expanded — the collapsed styles only apply above the
   900px breakpoint. */
export function useSidebar() {
  const collapsed = useState<boolean>('sidebar:collapsed', () => false)

  if (import.meta.client) {
    watch(collapsed, (is) => {
      document.documentElement.classList.toggle('sidebar-collapsed', is)
    })
  }

  function restoreSidebar() {
    if (import.meta.client)
      collapsed.value = localStorage.getItem('mathew:sidebar-collapsed') === '1'
  }

  function toggleSidebar() {
    collapsed.value = !collapsed.value
    if (import.meta.client)
      localStorage.setItem('mathew:sidebar-collapsed', collapsed.value ? '1' : '0')
  }

  return { collapsed: readonly(collapsed), toggleSidebar, restoreSidebar }
}