Vuetify navigation drawer, make mini on small screen rather than hide

user_5091805 0
Viewed 1236

When the browser is of a certain size width I want the navigation drawer component to revert to mini rather than hide like its doing by default:

https://vuetifyjs.com/en/components/navigation-drawers/#api

<template>
    <v-navigation-drawer
        app
        floating
    > 

        <v-list nav rounded>
            <v-list-item link>
                <v-list-item-icon>
                    <v-icon>mdi-heart</v-icon>
                </v-list-item-icon>
                <v-list-item-title>Heart</v-list-item-title>
            </v-list-item>
        </v-list>

    </v-navigation-drawer>
</template>

<script>
export default {
  name: "AppNavigation",
  data: () => ({
 
  })
}
</script>

<style scoped>

</style>

Expected behavior

When I reduce the browser width, it should show the v-list icons like the mini variant, or expand on hover.

Actual behavior

The navigation drawer disappears completely by design but not sure how to stop this in the correct way.

Ideas

There is the permanent flag but how would I detect the screen size has changed? I could do a combination of permanent and mini.sync

vuetify.js
1 Answers

you can access vuetify's built in breakpoints through $vuetify.breakpoint.<breakpoint> so for the drawer you can have this binding: :mini-variant="$vuetify.breakpoint.mdAndDown".

condition returns true for screen width below 1264 px and mini-variant comes to play and it returns false above 1264 px so you can have your normal drawer.

check the demo below and run it in full screen mode and resize the window to see the effect.

Vue.config.productionTip = false;

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
})
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

<div id="app">
  <v-app>
    <v-navigation-drawer app color="indigo" floating permanent :mini-variant="$vuetify.breakpoint.mdAndDown">

      <v-list nav rounded>
        <v-list-item link>
          <v-list-item-icon>
            <v-icon>mdi-heart</v-icon>
          </v-list-item-icon>
          <v-list-item-title>Heart</v-list-item-title>
        </v-list-item>
      </v-list>

    </v-navigation-drawer>
  </v-app>
</div>

user_120789420
Related