<script lang="ts">
import {RouterView} from 'vue-router';
import {Options, Vue} from 'vue-class-component';
import DocumentLocaleSetter from '@/components/locale/DocumentLocaleSetter.vue';
import NavBar from '@/components/navbar/NavBar.vue';
import LocaleSaver from '@/components/locale/LocaleSaver.vue';
import SideBar from '@/components/sidebar/SideBar.vue';

@Options({
  name: 'App',
  components: {
    DocumentLocaleSetter,
    LocaleSaver,
    NavBar,
    RouterView,
    SideBar,
  },
})
export default class App extends Vue {
  sidebarToggled = false;
}

</script>

<template>
  <LocaleSaver/>
  <DocumentLocaleSetter/>
  <div class="h-100 w-100 overflow-hidden">
    <div class="h-100 w-100 d-flex flex-row">
      <SideBar ref="sidebar" class="overflow-hidden" style="height: 100vh" :toggled="sidebarToggled"
               @close="sidebarToggled=false"/>
      <div class="flex-grow-1 overflow-hidden">
        <div class="d-flex flex-column w-100 h-100">
          <NavBar class="flex-grow-0" @toggleSidebar="sidebarToggled = !sidebarToggled"></NavBar>
          <RouterView class="flex-grow-1 overflow-hidden"/>
        </div>
      </div>
    </div>
  </div>
</template>
