CODEWITHSUNDEEP
vue.jsvuejs2vuetify.js
Jason
Jason

Reputation: 1141

switch vuetify navigation bar to mini on mobile devices

This is a Vue.js project and I am using Vuetify. I have a navigation drawer. At 1263px screen width the resize-watcher kicks in and the drawer closes. I can prevent this using 'permanent'. What I would like it to do is instead of closing the drawer switch to mini.

here is my existing code. 

<v-navigation-drawer 
    clipped 
    :mini-variant="mini"
    v-model="drawer"
    permanent
    app
    hide-overlay
>
    <v-list dense>

        <v-list-tile
        v-for="(item, index) in authorized"
        :key="index"
        @click="sendComponent(item)"
        >

        <v-list-tile-action>
            <v-tooltip right slot="activator">
                <v-icon slot="activator">{{ item.icon }}</v-icon>
                <span>{{ item.title }}</span>
            </v-tooltip>
        </v-list-tile-action>

        <v-list-tile-content>
            <v-list-tile-title>{{ item.title }}</v-list-tile-title>
        </v-list-tile-content>

        </v-list-tile>
    </v-list>
</v-navigation-drawer>

https://codepen.io/jsd219/pen/gJJMPQ

Any help is much appreciated

Upvotes: 5

Views: 11400

Answers (1)

tao
tao

Reputation: 90148

Considering your <v-navigation-drawer mini-variant="mini">, from docs:

computed: {
  mini() {
    switch (this.$vuetify.breakpoint.name) {
      case 'xs': return true
      case 'sm': return true
      case 'md': return true
      case 'lg': return false
      case 'xl': return false
  }
}

Note you have the complete structure of the $vuetify.breakpoint object in the docs.
Most likely, you'll want to replace the verbose syntax above (posted mostly for future users, with different use-cases) with:

computed: {
  mini() {
    return this.$vuetify.breakpoint.mdAndDown;
  }
}

Upvotes: 14

Related Questions