CODEWITHSUNDEEP
vue.jsvue-routervuetify.js
Dmitriy Karpovich
Dmitriy Karpovich

Reputation: 309

Vuetify, how to close drawer?

I have added navigation to the drawer, everything works fine except the case when the link is the same as the page is. The drawer left open after clicking on the link and it isn't obvious for the visitor that the page is the current page.

I have tried to do something like this @click.stop="(this.router.path != '/' ? this.router.push('/') : drawer = !drawer)" Vue doesn't rapport any mistake and the code doesn't work.

Where am I wrong?

Upvotes: 0

Views: 19106

Answers (2)

Nathan Agersea
Nathan Agersea

Reputation: 536

I handled this by making the drawer in my app a child of the route that uses it. The isOpen property is managed in the parent. I pass isOpen as a prop to the drawer and emit open and close events as appropriate.

Oh, I also found that timeouts are necessary to ensure the open / close animations work correctly. Someone please let me know if you found a better way to handle animations as this feels a little wonky.

I handle a few other things, like right/left justify and a return route, but ignore the noise if it isn't helpful.

Here's a parent loading the component

<my-drawer
  :iconName="'my_icon'"
  :isOpen="drawerIsOpen"
  :justify="'right'"
  :returnRoute="'home'"
  @close="drawerIsOpen = false"
  @open="drawerIsOpen = true"
>
// ...
</my-drawer>

Here are the methods from within the drawer component:

data() {
  return {
    closeDelay: 500,
    width: 0,
  };
},
methods: {      
  closeBtnClick() {
    this.$emit('close');
    setTimeout(() => { this.$router.push(this.returnRoute); }, this.closeDelay);
  },

mounted() {
  setTimeout(() => { this.$emit('open'); }, this.closeDelay);
},

Upvotes: 1

Christopher Lawes
Christopher Lawes

Reputation: 106

The drawer data key is looking for a boolean, if it's truthy the navigation drawer will show. So, you can add @click="drawer = false" to your menu links, and it will close the draw when any link is clicked.

Example in the docs: https://vuetifyjs.com/components/navigation-drawers#example-6

Upvotes: 8

Related Questions