CODEWITHSUNDEEP
responsive-designnuxt.jsvuetify.jsnavigation-drawersidebar
belgacea
belgacea

Reputation: 1164

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

Upvotes: 0

Views: 7809

Answers (2)

Anthony Cathers
Anthony Cathers

Reputation: 310

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>

Upvotes: 3

Esteban MANSART
Esteban MANSART

Reputation: 561

I guess what you are looking for is the app property of the navigation component.

Juste remove it, and you will have the expected result

<v-navigation-drawer
    permanent
    mini-variant
    expand-on-hover
    left
>

And btw, why did you bind value to true ? There is no reason to do this :p You can remove it

EDIT : Sorry, i forgot that in my case, i have a parent container that enclose v-navigation-drawer and v-main

<v-container
      fluid
      class="d-flex flex-row align-start pa-0 align-stretch"
    >
        <v-navigation-drawer
            permanent
            mini-variant
            expand-on-hover
            left
        >
        </v-navigation-drawer>
        <v-main></v-main>
    </v-container>

Upvotes: 1

Related Questions