sori.studio/composables/useMenuState.js

const menuStorageKey = 'MENU_STATE'

/**
 * 좌측 메뉴 열림 상태 관리
 * @returns {{menuOpen: import('vue').Ref<boolean>, toggleMenu: Function, closeMenu: Function}} 메뉴 상태와 토글·닫기
 */
export const useMenuState = () => {
  const menuOpen = useState('site-menu-open', () => true)

  onMounted(() => {
    const savedState = localStorage.getItem(menuStorageKey)

    if (savedState) {
      menuOpen.value = savedState === 'open'
    }
  })

  /**
   * 좌측 메뉴 열림 상태 토글
   * @returns {void}
   */
  const toggleMenu = () => {
    menuOpen.value = !menuOpen.value
    localStorage.setItem(menuStorageKey, menuOpen.value ? 'open' : 'closed')
  }

  /**
   * 좌측 메뉴를 닫는다(모바일 오버레이·백드롭에서 사용).
   * @returns {void}
   */
  const closeMenu = () => {
    if (!menuOpen.value) {
      return
    }
    menuOpen.value = false
    localStorage.setItem(menuStorageKey, 'closed')
  }

  return {
    menuOpen,
    toggleMenu,
    closeMenu
  }
}