Search code examples
responsive-designnuxt.jsvuetify.jsnavigation-drawersidebar

Prevent vuetify side navigation drawer to overlap with pages content

I'm trying to prevent the vuetify v-navigation-drawer to overlap with the pages content.

How can I center the v-main content in a responsive way ?

https://codesandbox.io/s/nuxt-vuetify-sidenav-u0xte?file=/layouts/default.vue

Solution

  • This is documented behavior. https://vuetifyjs.com/en/components/navigation-drawers/#caveats

    The expand-on-hover prop does not alter the content area of v-main. To have content area respond to expand-on-hover, bind mini-variant.sync to a data prop.

    so all you need to do is create a data variable and bind it to the mini-variant.sync

    <template>
  <v-navigation-drawer app absolute mini-variant expand-on-hover left :mini-variant.sync="mini">
  </v-navigation-drawer>
</template>

<script>
export default {
  name: "SideNav",
  data() {
    return {
        mini: true
    }
};
</script>