[FIXED] How to make a side panel in a component with Quasar Vue Framework 14.3

Issue

I have a working left side panel using Quasar version 14.3. Now I want to make it a component. When I use this:

<template>
  <q-layout ref="layout"
            :left-breakpoint=0>

    <q-scroll-area slot="left" style="width: 80%; height: 100%>
      <div>
        <left-panel></left-panel>
      </div>
    </q-scroll-area>
  </q-layout>
</template>

It kind of works, however:

• the width gives css issues
• do I really have to keep the q-scroll-area out of the component? When I include it the side panel does not hide but is in the page and then the actual page is below it when you scroll down.

Any suggestion to how to make a solid side panel in a component with Quasar?

Solution

You can use q-layout-drawer for creating the left panel in q-layout

<template>
  <q-layout ref="layout" :left-breakpoint=0>
    <q-layout-drawer v-model="flag" side="left">
      <q-scroll-area slot="left" style="width: 80%; height: 100%">
        <div>
          <left-panel></left-panel>
        </div>
      </q-scroll-area>
    </q-layout-drawer>
  </q-layout>
</template>

Set flag true in data of Vue component.You can also open/close drawer on button click by setting flag true false

Answered By - Patel Pratik

Answer Checked By - Pedro (PHPFixing Volunteer)