How to separate `LeftSideDrawer`?

[theara]

I would like to separate LeftSideDrawer.
How to pass showLeft props when resize layout

// Layout
<left-side show="showLeft">
----------
// LeftSide
<q-layout-drawer
      v-model="showLeft"
      :width="270"
      side="left"
    >
...
props: ['showLeft']

Please help me

[s.molinari]

Your question makes no sense, unfortunately. What does “separate LeftSideDrawer” mean? showLeft also isn’t a prop.

Scott

[theara]

Sorry for my example

• App.vue

<q-layout
    ref="layout"
    view="lHr lpR lfr"
  >

  <left-side show="showLeft">
...
data() {
  return {showLeft: true}
}

• LeftSide.vue

<q-layout-drawer
      v-model="showLeft"
      :width="270"
      side="left"
    >
...
props: ['show'],
data() {
  return {showLeft: this.show}
},
watch: {
  show(val) {
     this.showLeft = val
  }
}

It don’t work, when I resize windows

[s.molinari]

I still don’t understand what it is you want to happen. What is “it” in “It don’t work”? Do you mean something like the left drawer has it’s own behavior, when the window gets smaller?

Scott

[genyded]

I think you may be talking about the fact that if you make the windows smaller while the side drawer(s) is/are open, the will disappear, but if you go larger to smaller resize they do not. If so, the always happens and has nothing to do with if you drawer is a seperate component or not. It’s the way the DOM works in browsers when adding/removing elements in certain states. There are some very hacky ways to get around it, but they are more trouble then they are worth. If your app is well designed though, most users will not be resizing with the drawers open (especially making them smaller).

If that is not what you are talking about, then as stated you need to provide more specific information on what you are talking about. EXACTLY what can we do to reproduce the issue the issue?

[theara]

@genyded, you are right.
but I don’t know how to change show props = false with LefSide auto closed when click outside
(Where to upload image in this forum)

[s.molinari]

@theara

(Where to upload image in this forum)

Click on the “Reply” button to the person you want to reply to. You’ll get the full editor.

Scott

[theara]

@s-molinari

How to track Left side closed model (false) when click list item or outside?

[s.molinari]

If you want to see how it works, it’s best to git clone the core Quasar repo, cd into the new folder “quasar” and do yarn install and then yarn dev. A browser window should open with all the cool things you can do with Quasar.

Scroll down to “NEW-LAYOUT” and take a look. Any code examples are under the “dev” folder. There you’ll also see how “left Drawer” is controlled. The whole layout component is pretty wicked.

Scott