<script setup>
const { menuOpen, closeMenu } = useMenuState()

/**
 * 모바일에서 좌측 슬라이드 메뉴가 열려 있을 때 문서 스크롤을 잠근다.
 * @returns {void}
 */
const syncMobileNavScrollLock = () => {
  if (!import.meta.client) {
    return
  }
  const isNarrow = window.matchMedia('(max-width: 1023px)').matches
  document.documentElement.classList.toggle('site-mobile-nav-open', Boolean(menuOpen.value && isNarrow))
}

watch(menuOpen, syncMobileNavScrollLock)

onMounted(() => {
  syncMobileNavScrollLock()
  window.addEventListener('resize', syncMobileNavScrollLock)
})

onBeforeUnmount(() => {
  window.removeEventListener('resize', syncMobileNavScrollLock)
  if (import.meta.client) {
    document.documentElement.classList.remove('site-mobile-nav-open')
  }
})
</script>

<template>
  <div class="site-shell post-layout">
    <SiteTopChrome>
      <SiteHeader />
    </SiteTopChrome>
    <Transition
      enter-active-class="transition-opacity duration-200 ease-out"
      leave-active-class="transition-opacity duration-200 ease-in"
      enter-from-class="opacity-0"
      leave-to-class="opacity-0"
    >
      <div
        v-show="menuOpen"
        class="post-layout__nav-backdrop fixed inset-x-0 bottom-0 z-40 bg-black/35 backdrop-blur-[2px] lg:hidden"
        style="top: var(--site-top-chrome-height, 57px)"
        aria-hidden="true"
        @click="closeMenu"
      />
    </Transition>
    <div
      class="post-layout__grid mx-auto flex w-full max-w-[1294px] flex-1 flex-col bg-[var(--site-bg)] px-4 lg:grid lg:grid-cols-[287px_minmax(0,1fr)_287px] lg:items-start lg:gap-x-0 lg:px-5 lg:transition-[grid-template-columns,max-width,gap] lg:duration-300 lg:ease-out xl:gap-x-0 xl:px-6 2xl:px-0"
      :class="menuOpen ? '' : 'lg:max-w-[1007px] lg:!gap-x-0 lg:[grid-template-columns:0_minmax(0,1fr)_287px]'"
    >
      <main
        class="site-main min-w-0 w-full max-w-full overflow-x-hidden lg:col-start-2 lg:row-start-1 lg:max-w-[720px] lg:justify-self-start"
        :class="[{ 'site-main--menu-closed': !menuOpen }]"
      >
        <slot />
      </main>
      <RightSidebar class="lg:col-start-3 lg:row-start-1" />
      <LeftSidebar :menu-open="menuOpen" class="lg:col-start-1 lg:row-start-1" />
    </div>
  </div>
</template>
