zenn
e769595c5d
약 1024~1280px에서 검색창 고정 폭과 lg:px-0 때문에 헤더 요소가 밀집되던 문제를 패딩·gap·max-w 조정으로 완화하고, 본문 그리드 패딩을 헤더와 맞췄다. Co-authored-by: Cursor <cursoragent@cursor.com>
62 lines
2.1 KiB
Vue
62 lines
2.1 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 post-layout">
|
|
<SiteHeader class="shrink-0" />
|
|
<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 top-[57px] bottom-0 z-40 bg-black/35 backdrop-blur-[2px] lg:hidden"
|
|
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,720px)_287px] lg:items-start lg:px-5 lg:transition-[grid-template-columns,max-width] lg:duration-300 lg:ease-out xl:px-6 2xl:px-0"
|
|
:class="menuOpen ? '' : 'lg:max-w-[1007px] lg:[grid-template-columns:0_minmax(0,720px)_287px]'"
|
|
>
|
|
<main
|
|
class="site-main min-w-0 w-full overflow-x-hidden lg:col-start-2 lg:row-start-1 lg:w-[720px]"
|
|
: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>
|