<style>
.main-height {
  height: calc(100vh - 80px);
}
.scrollable-content {
  overflow-y: auto;
}
</style>
<template>
  <div class="h-screen bg-gray-50 dark:bg-gray-900">
    <Navbar v-if="hasNavbar" />
    <div id="main" class="flex" :class="{'main-height': isAuthenticated}">
      <Sidebar v-if="hasSidebar" />
      <div class="flex flex-col flex-1 scrollable-content">
        <LoadingOverlay v-if="$store.state.loading" />
        <router-view />
        <Sitemap v-if="hasSitemap" />
      </div>
    </div>
  </div>
</template>
<script>
import { isAuthenticated } from "@/global/request";
import LoadingOverlay from "./components/loading/LoadingOverlay.vue";
import Navbar from "./layouts/Navbar.vue";
import Sidebar from "./layouts/Sidebar.vue";
import Sitemap from "./layouts/Sitemap.vue";
export default {
  name: "app",
  components: {
    Navbar,
    Sidebar,
    Sitemap,
    LoadingOverlay,
  },
  data() {
    return {
      isAuthenticated: isAuthenticated(),
    };
  },
  computed: {
    hasSidebar() {
      return this.$route.meta.sidebar;
    },
    hasNavbar() {
      return this.$route.meta.navbar;
    },
    hasSitemap() {
      return this.$route.meta.sitemap;
    },
  },
};
</script>
