<template>
    <q-layout view="hHh lpR fFf">
        <Topbar @on-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">
                <q-list padding>
                    <q-item
                        clickable
                        v-ripple
                        :to="{ path: '/dashboard' }"
                        active-class="text-orange"
                    >
                        <q-item-section avatar>
                            <q-icon name="dashboard" />
                        </q-item-section>
                        <q-item-section>Dashboard</q-item-section>
                    </q-item>
                    <q-item
                        clickable
                        v-ripple
                        :to="{ path: '/customer' }"
                        active-class="text-orange"
                    >
                        <q-item-section avatar>
                            <q-icon name="people" />
                        </q-item-section>
                        <q-item-section>Customers</q-item-section>
                    </q-item>
                    <q-item clickable v-ripple :to="{ path: '/ticket' }" active-class="text-orange">
                        <q-item-section avatar>
                            <q-icon name="vn:ticket" />
                        </q-item-section>
                        <q-item-section>Tickets</q-item-section>
                    </q-item>
                    <q-item clickable v-ripple>
                        <q-item-section avatar>
                            <q-icon name="receipt" />
                        </q-item-section>

                        <q-item-section>Invoice Out</q-item-section>
                    </q-item>

                    <q-item clickable v-ripple>
                        <q-item-section avatar>
                            <q-icon name="shopping_cart" />
                        </q-item-section>

                        <q-item-section>Catalog</q-item-section>
                    </q-item>

                    <q-separator />

                    <q-item clickable v-ripple>
                        <q-item-section avatar>
                            <q-icon name="drafts" />
                        </q-item-section>

                        <q-item-section>Drafts</q-item-section>
                    </q-item>
                </q-list>
            </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 Topbar from '@/components/Topbar.vue';
const drawer = ref(false);
const miniState = ref(true);

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

<style lang="scss" scoped>
.bg-darker {
    background-color: $darker;
}
</style>
