<script setup lang="ts">
import { RouterView } from "vue-router";
import TopBar from "./components/layout/TopBar.vue";
import SideBar from "./components/layout/SideBar.vue";
import TableOfContent from "./components/layout/TableOfContent.vue";
import { useConfigStore } from "./stores/config";
import { onMounted } from "vue";
import axios from "axios";

const store = useConfigStore();

onMounted(() => {
  axios.get(`/pelican.json`).then((response) => store.setConfig(response.data));
});
</script>

<template>
  <TopBar id="topbar" />
  <div id="wrapper">
    <SideBar />
    <div id="page">
      <div id="content" class="pt-1">
        <RouterView />
      </div>
    </div>
    <TableOfContent />
  </div>
</template>
