salix-front/src/layouts/MainLayout.vue

<script setup>
import { ref } from 'vue';
import { useQuasar } from 'quasar';
import Navbar from 'src/components/NavBar.vue';

const quasar = useQuasar();

const rightDrawer = ref(false);

function toggleRightDrawer() {
    rightDrawer.value = !rightDrawer.value;
}
</script>

<template>
    <q-layout view="hHh LpR fFf">
        <Navbar @on-toggle-right-drawer="toggleRightDrawer" />
        <router-view></router-view>
        <q-drawer
            v-model="rightDrawer"
            show-if-above
            side="right"
            :width="256"
            :breakpoint="800"
        >
            <q-scroll-area class="fit text-grey-8">
                <div id="rightPanel"></div>
            </q-scroll-area>
        </q-drawer>
        <q-footer v-if="quasar.platform.is.mobile"></q-footer>
    </q-layout>
</template>

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