App.vue

<template>
  <div :key="locale" class="app tw-flex tw-flex-col md:tw-grid tw-gap-6">
    <div class="tw-p-6 tw-h-full" style="grid-area: main">
      <RouterView v-if="authStore.steeringUser" />
      <Home v-else :modules="[]" />
    </div>

    <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'

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

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