<script setup>
import { useState } from 'src/composables/useState';
import TicketDescriptor from './TicketDescriptor.vue';
import LeftMenu from 'components/LeftMenu.vue';

const state = useState();
</script>
<template>
    <q-drawer v-model="state.drawer.value" show-if-above :width="256" :breakpoint="500">
        <q-scroll-area class="fit">
            <ticket-descriptor />
            <q-separator />
            <left-menu source="card" />
        </q-scroll-area>
    </q-drawer>
    <q-page-container>
        <q-page class="q-pa-md">
            <router-view></router-view>
        </q-page>
    </q-page-container>
</template>

<style lang="scss">
.q-scrollarea__content {
    max-width: 100%;
}
</style>

<style lang="scss" scoped>
.descriptor {
    max-width: 256px;

    h5 {
        margin: 0 15px;
    }

    .header {
        display: flex;
        justify-content: space-between;
    }

    .q-card__actions {
        justify-content: center;
    }

    #descriptor-skeleton .q-card__actions {
        justify-content: space-between;
    }
}
</style>
