How to create side drawer on page

[JokerMartini]

How can I create a side-drawer on one of the pages the user gets routed to? while having the independent scroll on the sidebar (left) and content (right)? For the life of me i can only get the proper scrolling affects to take place if i put all the code from the SubPage directly into the MainLayout which isn't going to work for what I'm trying to do.

Here is the index (homepage)

When someone clicks the button it should take them to the SubPage which you can see has a sidebar and main content section, each which have independent scrolls bars. While the main Header toolbar remains unchanged.

MainLayout.vue

<template>
  <q-layout view="hHh LpR fFf">
    <q-header elevated>
      <q-toolbar class="bg-grey-10 text-white">
        <q-btn
          dense
          stretch
          flat
          label="Seeker"
          icon="mdi-package-variant"
          to="/"
        />
      </q-toolbar>
    </q-header>

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

SubPage.vue

<template>
  <q-layout>
    <q-drawer
      :width="300"
      show-if-above
      :v-model="true"
      side="left"
      behavior="desktop"
      bordered
    >
      <!-- drawer content -->
      <div class="q-pa-sm">
        <q-input ref="filterRef" filled v-model="filter" label="Filter" dense>
        </q-input>
      </div>
    </q-drawer>

    <q-page-container>
      <q-page padding>
        <p v-for="n in 15" :key="n">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit nihil
          praesentium molestias a adipisci, dolore vitae odit, quidem
          consequatur optio voluptates asperiores pariatur eos numquam rerum
          delectus commodi perferendis voluptate?
        </p>
      </q-page>
    </q-page-container>
  </q-layout>
</template>

Here is an example layout from the page builder showing what i want. But keep in mind the side bar and main content are defined in another page.

<template>
  <q-layout view="hHh LpR fFf">

    <q-header bordered class="bg-primary text-white">
      <q-toolbar>
        <q-btn dense flat round icon="menu" @click="toggleLeftDrawer" />

        <q-toolbar-title>
          <q-avatar>
            <img src="https://cdn.quasar.dev/logo-v2/svg/logo-mono-white.svg">
          </q-avatar>
          Title
        </q-toolbar-title>
      </q-toolbar>
    </q-header>

    <q-drawer show-if-above v-model="leftDrawerOpen" side="left" behavior="desktop" bordered>
      <!-- drawer content -->
    </q-drawer>

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

  </q-layout>
</template>

<script>
import { ref } from 'vue'

export default {
  setup () {
    const leftDrawerOpen = ref(false)

    return {
      leftDrawerOpen,
      toggleLeftDrawer () {
        leftDrawerOpen.value = !leftDrawerOpen.value
      }
    }
  }
}
</script>

[MilosPaunovic]

Hello @JokerMartini,

Try switching <q-layout> in favour of <q-page> in SubPage.vue and see if that does the trick.

[JokerMartini]

@MilosPaunovic oooo that almost does the trick. But it appears it adds padding for some reason to compenstate for the Drawer... Why would that be or how do i fix this?

[JokerMartini]

i also changed the page-container to page that fixed it

[MilosPaunovic]

Great! Glad I could help 🙂