Drawer sidebar closes on any click

[cschweda]

Issue:

Sidebar with 'drawer' attribute will close no matter where it's clicked (even if it's on a parent link to expand child link(s)). I assume this is by design.

However, what I'd like is a drawer sidebar that has expandable groups -- and that won't close if the group parent link is clicked (to expand children).

I know I can bind 'close-on-click' to 'false' -- but then how do I close the sidebar drawer after an actual link has been clicked?

Demo:

https://dist-tnkhjdmftk.now.sh/

Relevant code:

<v-app top-navbar>
    <header>
      <v-navbar><v-navbar-side-icon v-sidebar:sidebar2></v-navbar-side-icon></v-navbar>
    </header>
    <main>
      <v-sidebar id="sidebar2" drawer :close-on-click="true">
          <v-sidebar-items v-bind:items="items"></v-sidebar-items>
          <v-sidebar-items v-bind:items="items2"></v-sidebar-items>
          <v-sidebar-items v-bind:items="items2"></v-sidebar-items>
      </v-sidebar>

      <v-content>
        <v-container>

        </v-container>
      </v-content>
    </main>
  </v-app>

  data () {
  return {
    items: [
      { header: 'Header' },
      {
        parent: { text: 'Parent', href: '#!" '},
        items: [
          { text: 'Child', href: '#!', icon: 'list' },
          { text: 'Child', href: '#!', icon: 'list' },
          { text: 'Child', href: '#!', icon: 'list' }
        ]
      },

    ],
    items2: [

      {
        parent: { text: 'Parent', href: '#!" '},
        items: [
          { text: 'Child', href: '#!', icon: 'list' },
          { text: 'Child', href: '#!', icon: 'list' },
          { text: 'Child', href: '#!', icon: 'list' }
        ]
      },

    ]
  }
},

[johnleider]

This was resolved with 0d1b994e78da67dac10cb7fb5d14f403e41aefe2.

[cschweda]

Hmmm. Still not working. Same behavior. Click anywhere on the sidebar -- everything closes.

Upgraded vueitfy in package.json to 0.8.4.

https://dist-nynpyeqfpa.now.sh/

Relevant part of package.json -- am I missing something?

"devDependencies": {
    "buble": "^0.15.1",
    "buble-loader": "^0.4.0",
    "cross-env": "^3.0.0",
    "css-loader": "^0.25.0",
    "file-loader": "^0.9.0",
    "style-loader": "^0.13.1",
    "stylus": "^0.54.5",
    "stylus-loader": "^2.4.0",
    "vue-loader": "^10.0.2",
    "vue-template-compiler": "^2.1.8",
    "vuetify": "^0.8.4",
    "webpack": "^2.2.0-rc.2",
    "webpack-dev-server": "^2.2.0-rc.0"
  }

And in sidebar.vue (line 108):

closeConditional (e) {
        return (
          (window.innerWidth >= this.mobileBreakPoint && !this.drawer)
          || !this.closeOnClick
         || this.$el.contains(e.target)
        )
      }

Using the vuetify-cli template. Only change is the updated vuetify version and the removal of the template boilerplate text.

BTW -- this is the behavior I'm trying to replicate:

https://dist-zbndwtstml.now.sh

(Click menu icon -- sidebar pops out, expand a section, then click on a link to go to page and close sidebar.)

[johnleider]

While it was resolved, I haven't released a new version yet. Once that is up, your issue should be solved.

[cschweda]

Thanks.

Yes, I want to close on a link click -- or a click on the menu icon. That way it'll work on mobile, too. It'll snap shut when a user clicks a link -- but it'll stay open if a user expands a parent accordion to expose child links.

Again -- many thanks.

On Tue, Jan 3, 2017 at 4:37 PM John Leider notifications@github.com wrote:

I'll take a look when I get home. Normally a drawer opens and closes. If you don't want it to close at all, you would use ```:close-on-click="false".

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/vuetifyjs/vuetify/issues/68#issuecomment-270245631, or mute the thread https://github.com/notifications/unsubscribe-auth/AAlZkeJBTdK64w7xo325wSkj7j_PHl-Cks5rOs2cgaJpZM4LZ8P8 .

-- Sent from my iPhone

[johnleider]

Yup this is resolved and will be part of next release.

[cschweda]

Thank you! Looking forward to it.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. Please direct any non-bug questions to our Discord