65 lines
2.2 KiB
Vue
65 lines
2.2 KiB
Vue
<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 public-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="public-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="public-layout__grid mx-auto flex w-full max-w-[1294px] flex-1 flex-col bg-[var(--site-bg)] 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>
|