55 lines
1.4 KiB
Vue
55 lines
1.4 KiB
Vue
|
<script setup lang="ts">
|
||
|
|
import { ref } from 'vue';
|
||
|
|
import { storeToRefs } from 'pinia';
|
||
|
|
import { useQuasar } from 'quasar';
|
||
|
|
|
||
|
|
import useLoader from 'stores/loader';
|
||
|
|
import DrawerComponent from 'components/DrawerComponent.vue';
|
||
|
|
|
||
|
|
const $q = useQuasar();
|
||
|
|
const loaderStore = useLoader();
|
||
|
|
|
||
|
|
const { visible } = storeToRefs(loaderStore);
|
||
|
|
|
||
|
|
const leftDrawerOpen = ref($q.screen.gt.sm);
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<q-layout view="lHh Lpr lFf">
|
||
|
|
<q-header style="background-color: var(--background)">
|
||
|
|
<div class="row items-center justify-between q-py-md q-px-lg">
|
||
|
|
<q-btn
|
||
|
|
round
|
||
|
|
unelevated
|
||
|
|
id="drawer-toggler"
|
||
|
|
icon="mdi-backburger"
|
||
|
|
:class="{ bordered: $q.dark.isActive }"
|
||
|
|
class="surface-2"
|
||
|
|
style="color: var(--gray-6)"
|
||
|
|
@click="leftDrawerOpen = !leftDrawerOpen"
|
||
|
|
/>
|
||
|
|
<q-btn
|
||
|
|
round
|
||
|
|
unelevated
|
||
|
|
id="drawer-toggler"
|
||
|
|
icon="mdi-switch"
|
||
|
|
:class="{ bordered: $q.dark.isActive }"
|
||
|
|
class="surface-2"
|
||
|
|
style="color: var(--gray-6)"
|
||
|
|
@click="$q.dark.toggle()"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</q-header>
|
||
|
|
|
||
|
|
<q-page-container style="background-color: transparent">
|
||
|
|
<q-page class="q-px-lg q-pa-md">
|
||
|
|
<router-view />
|
||
|
|
</q-page>
|
||
|
|
</q-page-container>
|
||
|
|
|
||
|
|
<drawer-component v-model:leftDrawerOpen="leftDrawerOpen" />
|
||
|
|
|
||
|
|
<global-loading :visibility="visible" />
|
||
|
|
</q-layout>
|
||
|
|
</template>
|