<template>
  <slot v-if="route.meta.immersive" />
  <template v-else>
    <TopNav />
    <main class="fc-content">
      <slot />
    </main>
  </template>
</template>

<script setup>
import { useRoute } from 'vue-router'
import TopNav from './TopNav.vue'

const route = useRoute()
</script>

<style scoped>
.fc-content {
  min-height: 100vh;
  /* Push initial viewport content below the sticky TopNav. Without
     this, some views' first rows / form fields / table headers can
     end up obscured by the navbar (depending on parent overflow
     context interacting with position: sticky). Scrolled-down content
     still slides under the nav — the gradient-fade design is intact. */
  padding-top: 64px;
}
</style>
