I am currently utilizing the quasar UI framework and have a main layout file that includes only a toolbar. This toolbar is meant to display across all pages in my application.
<template>
<q-layout view="hHh Lpr lff" style="background-color: #F8F8FA">
<q-header elevated class="bg-black text-grey-8" height-hint="64">
<q-toolbar style="height: 64px">
<q-toolbar-title
style="cursor: pointer;"
@click.stop="toHome()"
shrink
class="row items-center no-wrap"
>
<q-avatar>
<img src="~assets/logo_white.png" alt="logo" />
</q-avatar>
<span class="text-white gilroy q-ml-sm">My App</span>
</q-toolbar-title>
</q-toolbar>
</q-header>
<q-page-container>
<router-view />
</q-page-container>
</q-layout>
</template>
Now, I am trying to implement a navigation drawer on just one page of my application, but I want it to overlay underneath the existing toolbar from the main layout. However, I am struggling with ensuring that the overlay does not cover the toolbar. Below is the code snippet for that specific page where I attempted to achieve this:
<-- TestPage.vue -->
<template>
<q-layout>
<q-drawer
v-show="$route.params.slugNumber"
content-style="background-color: #F8F8FA"
v-model="leftDrawer"
:mini="!leftDrawer || miniStateLeft"
side="left"
bordered
overlay
>
</q-drawer>
<q-page-container>
<q-page>
</q-page>
</q-page-container>
</q-layout>
</template>
Furthermore, here is my router configuration file for added context:
const routes = [
{
path: "/",
component: () => import("layouts/MainLayout.vue"),
children: [
{ path: "", component: () => import("pages/HomePage.vue") },
{
path: "/testpage",
component: () => import("pages/TestPage.vue")
},
]
},
];
export default routes;
If anyone can provide insight into what might be missing or incorrect in my implementation, I would greatly appreciate it. Thank you in advance.