<template>
    <q-layout view="hHh lpR fFf">
        <Navbar @toggle-drawer="onToggleDrawer()" />
        <q-drawer
            v-model="drawer"
            show-if-above
            :mini="miniState"
            @mouseover="miniState = false"
            @mouseout="miniState = true"
            mini-to-overlay
            :width="200"
            :breakpoint="500"
        >
            <q-scroll-area class="fit text-grey-8">
                <LeftMenu />
            </q-scroll-area>
        </q-drawer>
        <q-page-container>
            <router-view></router-view>
        </q-page-container>
    </q-layout>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import Navbar from 'src/components/Navbar.vue';
import LeftMenu from 'src/components/LeftMenu.vue';
const drawer = ref(false);
const miniState = ref(true);

function onToggleDrawer(): void {
    drawer.value = !drawer.value;
}
</script>

<style lang="scss" scoped></style>
