<template>
  <q-header elevated>
    <q-toolbar>
      <q-btn
        flat
        dense
        round
        icon="menu"
        aria-label="Menu"
        @click="toggleLeftDrawer" />

      <q-toolbar-title>{{ pageTitle }}</q-toolbar-title>
      <q-space />
      <div>v{{ APP_VERSION }}</div>
    </q-toolbar>
  </q-header>
  <LeftDrawer
    :drawer="leftDrawerOpen"
    @drawer-toggle="toggleLeftDrawer" />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import LeftDrawer from 'components/LeftDrawer.vue';
import { APP_VERSION } from 'src/version';

const leftDrawerOpen = ref(false);
function toggleLeftDrawer() {
  leftDrawerOpen.value = !leftDrawerOpen.value;
}
defineProps({
  pageTitle: String,
});
</script>
