<script setup lang="ts">
import { ref } from 'vue';
import { useQuasar } from 'quasar';
import BottomNavComponent from '~/components/BottomNavComponent.vue';
import LeftDrawer from '~/components/LeftDrawer.vue';
import { APP_VERSION } from '~/utils/version';

const q = useQuasar();
const route = useRoute();
const leftDrawerOpen = ref(false);

function toggleLeftDrawer() {
  leftDrawerOpen.value = !leftDrawerOpen.value;
}

q.addressbarColor?.set('#14539a');
</script>

<template>
  <q-layout view="hHh Lpr fFf">
    <q-header elevated>
      <q-toolbar>
        <q-btn
          flat
          dense
          round
          icon="menu"
          aria-label="Menu"
          @click="toggleLeftDrawer" />
        <q-toolbar-title>{{ route?.meta?.title as string }}</q-toolbar-title>
        <q-space />
        <div>v{{ APP_VERSION }}</div>
      </q-toolbar>
    </q-header>
    <LeftDrawer
      :drawer="leftDrawerOpen"
      @drawer-toggle="toggleLeftDrawer" />
    <q-page-container>
      <slot />
    </q-page-container>
    <q-footer>
      <BottomNavComponent />
    </q-footer>
  </q-layout>
</template>
