Why is Quasar drawer overlaying Quasar toolbar in Vue app?

I'm using the quasar UI framework. I have a main layout file that only has a toolbar. This toolbar displays for all pages of 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>

I want to put a nav drawer on only one of my pages that overlays underneath the toolbar from my main layout. I'm having trouble figuring out how to ensure the overlay doesn't go on top of the tool bar. Here is that page and my attempt at getting the drawer to overlay underneath the toolbar:

<-- 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>

Here is my router file for reference:

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;

Would love to understand what I'm missing here. Many thanks in advance.