CODEWITHSUNDEEP
vuetify.js
Ari
Ari

Reputation: 6178

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

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

Upvotes: 5

Views: 3434

Answers (1)

hamid niakan
hamid niakan

Reputation: 2861

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/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

Upvotes: 3

Related Questions