import { ref, watch, onMounted } from 'vue'

export function useSidebar() {
  const collapsed = ref(false)

  onMounted(() => {
    const savedState = localStorage.getItem('sidebar-collapsed')
    if (savedState !== null) {
      collapsed.value = savedState === 'true'
    }
  })

  watch(collapsed, (val) => {
    localStorage.setItem('sidebar-collapsed', String(val))
  }, { immediate: false })

  function toggleCollapse() {
    collapsed.value = !collapsed.value
  }

  return {
    collapsed,
    toggleCollapse
  }
}