App.vue

<template>
  <div :key="locale" class="app tw-flex tw-flex-col md:tw-grid">
    <ABreadcrumbs
      v-if="navStore.breadcrumbs.length > 0"
      class="tw-px-6 tw-border-solid tw-border-gray-200 tw-border-0 tw-border-b"
      :breadcrumbs="navStore.breadcrumbs"
      style="grid-area: breadcrumbs"
    />

    <main class="tw-h-full tw-p-6" style="grid-area: main">
      <RouterView v-if="authStore.steeringUser" class="tw-h-full" />
      <Home v-else :modules="[]" />
    </main>

    <ANavSidebar style="grid-area: nav" />
    <div id="sidebar-right" style="grid-area: slot"></div>
  </div>

  <AppFooter />
</template>

<script lang="ts" setup>
import AppFooter from './components/Footer.vue'
import Home from './Pages/Home.vue'
import { useI18n } from '@/i18n'
import { useAuthStore } from '@/stores/auth'
import ANavSidebar from '@/components/nav/ANavSidebar.vue'
import { useNavStore } from '@/stores/nav'
import ABreadcrumbs from '@/components/nav/ABreadcrumbs.vue'

const { locale } = useI18n()
const authStore = useAuthStore()
const navStore = useNavStore()
</script>

<style scoped>
.app {
  min-height: calc(100dvh - 40px);
  grid-template-areas: 'nav breadcrumbs breadcrumbs' 'nav main slot';
  grid-template-columns: 360px minmax(320px, 1200px) auto;
  grid-template-rows: min-content minmax(0, 1fr);
}
</style>