App.vue

<template>
  <template v-if="authStore.currentUser">
    <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" />
      </main>

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

    <AppFooter />
  </template>

  <LoginScreen v-else />
</template>

<script lang="ts" setup>
import AppFooter from './components/Footer.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'
import LoginScreen from '@/Pages/LoginScreen.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>