invest-research-frontend/web-app/src/App.vue

<template>
  <div :class="['web-app', layoutClass]">
    <template v-if="isAppLayout">
      <div class="app-shell">
        <TopNavBar @logout="onLogout" />
        <div class="app-body">
          <SideNav />
          <main class="content">
            <router-view />
          </main>
        </div>
      </div>
    </template>
    <router-view v-else />
    <ToastHost />
  </div>
</template>

<script setup>
import { computed, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useAuth } from '@/store/auth'
import { useMenu } from '@/store/menu'
import { useSyncDocumentTitle } from '@/composables/useSyncDocumentTitle'
import TopNavBar from '@/components/TopNavBar.vue'
import SideNav from '@/components/SideNav.vue'
import ToastHost from '@/components/common/ToastHost.vue'

const route = useRoute()
const router = useRouter()
const { logout } = useAuth()
const { state: menuState, reset: resetMenu, load: loadMenu } = useMenu()

useSyncDocumentTitle()

const isAppLayout = computed(() => route.meta?.layout !== 'blank')
const layoutClass = computed(() => (isAppLayout.value ? 'layout-app' : 'layout-blank'))

watch(
  () => route.path,
  (path) => {
    if (menuState.loaded) loadMenu()
    void path
  },
  { immediate: true },
)

function onLogout() {
  resetMenu()
  logout()
  router.replace('/login')
}
</script>