How to set vuetify drawer menu permanent when the devices is computer and no permanant when the device is mobile

user_11249056 0
Viewed 2759

someone can help to set my drawer menu permanent depending of the user device ? I was thinking of using the vuetify grid system to find out if I'm in lg or md or sm, but I don't know how to do it.

This is my drawer menu code : 

<v-navigation-drawer
            @input="updateDrawer"
            :hide-overlay="true"
            :mini-variant="true"
            :expand-on-hover="true"
            :touchless="true"
            :disable-resize-watcher="false"
            style="min-width: 100px!important;"
            v-model="d"
            //here set this: :permanent="!isMobile"
            app
            clipped
    >
        ...

    </v-navigation-drawer>

thanks.

vuetify.js vue.js
3 Answers

In fact, You can bind permanent directly to the breakpoint, instead of computed.

:permanent="!$vuetify.breakpoint.xsOnly"
user_128615740

If you wanted to still allow manual toggling of the navigation drawer (using a hamburger button), you could add another computed property for the v-model. This allows the drawer to auto show/hide based on the breakpoint or be manually toggled...

  computed: {
    isLarge() {
        return this.$vuetify.breakpoint.name !== 'xs'
    },
    showDrawer() {
        return this.isLarge || this.drawer
    }
  }, 


<v-navigation-drawer 
      v-model="showDrawer"
      :permanent="isLarge"
      color="primary"
      absolute 
      dark>..
</<v-navigation-drawer>

https://codeply.com/p/Y883gzgiKe

user_1714560

I found this solution that works for my case. I publish in case someone wants to do the same thing as me.

vuetify can give you the user device screen size basing on grid sysmtem. To get the sreen size, do it when the component is computed.

       computed: {
            isComputer() {
                return this.$vuetify.breakpoint.name !== 'xs';
            }
        }

The drawer menu code can be updated with this:

   <v-navigation-drawer
            ...
            //listen if it's a computer(in my case i want md, lg, sm as computer)
            :permanent="isComputer"
            app
            clipped
    ></v-navigation-drawer>
user_112490560
Related