<script setup lang="ts">
import { ref } from 'vue';

const leftDrawer = ref(false);
</script>

<template>
  <q-layout view="hHh Lpr fFf">
    <q-header elevated>
      <q-toolbar>
        <q-btn flat round dense icon="menu" @click="leftDrawer = !leftDrawer" />
        <q-toolbar-title>Admin</q-toolbar-title>
      </q-toolbar>
      <q-tabs>
        <q-route-tab icon="person" to="/admin/user" replace label="Users" />
        <q-route-tab icon="directions_boat" to="/admin/boat" replace label="Boats" />
      </q-tabs>
    </q-header>

    <q-drawer v-model="leftDrawer" side="left" bordered content-class="bg-grey-2">
      <q-scroll-area class="fit q-pa-sm" />
    </q-drawer>

    <q-page-container>
      <slot />
    </q-page-container>
  </q-layout>
</template>
