toggleLeft (or close) only when on phone?

  • My web app works fine, but I am having some trouble with the iphone version, the drawer won’t close. I suspect this is because I replaced my <q-side-link to= elements with a function

    <q-item @click="gotointernal('/dashboard','Dashboard')">:

    gotointernal (url, bigname) {
      this.routeName = bigname

    I could add a toggleLeft to that function, but I want the sidebar to stay open if on desktop, and only close if on a small device. Any idea how I can do one of the following:

    1. Fix the drawer so it works properly again on ios (but without reverting to q-side-link)
    2. Detect open/close state of drawer
    3. Only close drawer if on iphone/android, not on desktop


  • The more I look at this, the stranger it is. Can anyone explain to me why my method code above (that replaces q-side-link) would fail to hide the drawer when run (via cordova) on ios, but using q-side-link DOES properly hide the drawer and return control to the page?

  • This post is deleted!

  • Well, I found a workaround that hopefully helps someone else. I can attach a method separately by using @click.native=“mymethod()” in q-side-link.

  • How did you fix this ssuess?

  • I had some issues when closing drawer and navigating in the same method:

    // wrong way
    // right way
    this.layout.hideLeft(() => {

    Hope this helps

  • @trsiddiqui1989 exactly as I said above. Create a method that does what you want and attach it to @click.native in your q-side-link component. If you have a question about that, please let me know with specifics and I will try to answer in greater detail, hope this helps.

  • The problem is, hideLeft is not working on the side bar which comes with an overlay.

Log in to reply

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.