I'm trying to achieve to have my navigation drawer with expand-on-hover property true if i'm on desktop and show the classic v-app-bar-nav-icon if I'm on smaller screens or mobile. I have done this but the behaviour is kinda weird:

<v-app-bar-nav-icon
    v-if="!drawer"
    @click="drawer = true"
></v-app-bar-nav-icon>

<v-navigation-drawer
  app
  dark
  :expand-on-hover="$vuetify.breakpoint.mdAndUp && drawer"
  v-model="drawer"
  style="background-color: #374A67"
></v-navigation-drawer>

Works but in some situations just broke and if I resize the window the navigation drawer push the app bar when is hovered giving me an empty space. How can I do this the right way? Thank you

I'm trying to achieve to have my navigation drawer with expand-on-hover property true if i'm on desktop and show the classic v-app-bar-nav-icon if I'm on smaller screens or mobile. I have done this but the behaviour is kinda weird:

<v-app-bar-nav-icon
    v-if="!drawer"
    @click="drawer = true"
></v-app-bar-nav-icon>

<v-navigation-drawer
  app
  dark
  :expand-on-hover="$vuetify.breakpoint.mdAndUp && drawer"
  v-model="drawer"
  style="background-color: #374A67"
></v-navigation-drawer>

Works but in some situations just broke and if I resize the window the navigation drawer push the app bar when is hovered giving me an empty space. How can I do this the right way? Thank you

• javascript
• vue.js
• vuetify.js

• How did you hover on mobile? Right It is possible only using input device like a mouse or touchpad – Pallav Chanana Commented May 1, 2020 at 16:28
• I'm not doing it, the expand-on-hover is deactivated in smaller screens. My question it's how to do it because it's not working properly the way I posted it. – Lorenzo Fabro Commented May 1, 2020 at 18:00

1 Answer 1

This will work perfectly.

<v-navigation-drawer
  :value="$vuetify.breakpoint.smAndDown? drawer : true"
  app
  dark
  :expand-on-hover="$vuetify.breakpoint.mdAndUp"
  style="background-color: #374A67"
></v-navigation-drawer>