How not to overlay drawer from layout in quasar framework

Question

I am creating a website to learn to handle better with vue. I comment on my problem: It turns out that I have a general layout, in which I have a header, a drawer and a footer. When I access another page on the web, it has another layout, which consists of a drawer that will be a new menu. the problem I have is that when I access this page the drawer of the last layout is below the header that is in a different layout. I give you some images so that it is better understood.

This is the image with the header:

And this withoutheader when I scrolldown and then the header its not showed:

As you can see the menu is superimposed below the header.

Next I show you the code of the overlays:

MainLayout.vue:

<template>
  <q-layout view="hHh lpR fff">
    <!--HEADER-->
    <q-header reveal elevated class="text-white row justify-center">
      <q-parallax src="../assets/banner.jpg" :height="200" class="desktop-only">
        <q-toolbar
          class="col-1 desktop-hide"
          style="position: fixed; left:2vw; top:1vh"
        >
          <q-btn round color="secondary" icon="menu" @click="left = !left" />
          <q-toolbar-title class="row justify-center"> </q-toolbar-title>
        </q-toolbar>
        <q-img
          src="../assets/aloha.png"
          spinner-color="white"
          alt="Logo Alohas"
          style="max-width: 150px"
        />
      </q-parallax>
      <q-parallax src="../assets/banner.jpg" :height="100" class="desktop-hide">
        <q-toolbar
          class="col-1 desktop-hide"
          style="position: fixed; left:2vw; top:1vh"
        >
          <q-btn round color="secondary" icon="menu" @click="left = !left" />
          <q-toolbar-title class="row justify-center"> </q-toolbar-title>
        </q-toolbar>
        <q-img
          src="../assets/aloha.png"
          spinner-color="white"
          alt="Logo Alohas"
          style="max-width: 75px"
        />
      </q-parallax>
      <q-tabs align="center" class="desktop-only">
        <q-route-tab to="/menu/cbd" label="CBD" />
        <q-route-tab to="/menu/fertilizantes" label="Fertilizantes" />
        <q-route-tab to="/menu/semillas" label="Semillas" />
        <q-route-tab to="/menu/sustratos" label="Sustratos" />
        <q-route-tab to="/menu/iluminacion" label="Iluminación" />
        <q-route-tab to="/menu/ventilacion" label="Ventilación" />
        <q-route-tab to="/menu/parafernalia" label="Parafernalia" />
      </q-tabs>
    </q-header>

    foo...
  </q-layout>
</template>

DrawerLayout.vue:

<template>
  <q-layout view="hHh Lpr lff">
    <q-drawer
      show-if-above
      v-model="left"
      side="left"
      behavior="desktop"
      elevated
    >
      <q-list bordered separator>
        <q-item
          clickable
          v-ripple
          v-for="subcategory in subCategoriesFilter"
          :key="subcategory.name"
        >
          <q-item-section>{{ subcategory.name }}</q-item-section>
        </q-item>
      </q-list>
    </q-drawer>

    <q-page-container>
      <router-view />
    </q-page-container>
  </q-layout>
</template>

In short, what I want is for it to be this way: