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)
  const menuMounted = useState('site-menu-mounted', () => false)

  onMounted(() => {
    if (menuMounted.value) {
      return
    }

    const isNarrow = window.matchMedia('(max-width: 1023px)').matches

    if (isNarrow) {
      // 모바일은 항상 닫힌 상태로 시작한다(데스크톱 저장 설정은 보존).
      menuOpen.value = false
    } else {
      const savedState = localStorage.getItem(menuStorageKey)
      if (savedState) {
        menuOpen.value = savedState === 'open'
      }
    }

    menuMounted.value = true
  })

  /**
   * 좌측 메뉴 열림 상태 토글
   * @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,
    menuMounted,
    toggleMenu,
    closeMenu
  }
}