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

<template>
  <div class="site-shell public-layout">
    <SiteHeader />
    <div
      class="public-layout__grid mx-auto grid min-h-[calc(100vh-57px)] max-w-[1294px] grid-cols-1 bg-[var(--site-bg)] px-4 transition-[grid-template-columns,max-width] duration-300 ease-out lg:px-0 lg:[grid-template-columns:287px_minmax(0,720px)_287px]"
      :class="menuOpen ? '' : 'max-w-[1007px] lg:[grid-template-columns:0_minmax(0,720px)_287px]'"
    >
      <LeftSidebar :menu-open="menuOpen" />
      <main class="site-main w-full lg:w-[720px]" :class="{ 'site-main--menu-closed': !menuOpen }">
        <slot />
      </main>
      <RightSidebar />
    </div>
  </div>
</template>
