Vuetify: Why is the sidebar laying over the other element?

user_12244845 0
Viewed 2427

My sidebar is laying over the router-view but it should be "blocking" the space. screenshot of sidebar

In my App.vue there is following code

<template>
    <v-app id="app">
        <v-container>
            <sidebar class="d-block"/>

            <router-view class="d-block"></router-view>
        </v-container>
    </v-app>
</template>

Due to the d-block class of Vuetify I'd expect the sidebar to not overlay.

The sidebar is basically copied from the original API

<template>
    <v-container>
        <v-navigation-drawer
        v-model="drawer"
        :color="color"
        :permanent="permanent"
        :app="app"
        dark
        >
            <v-list dense nav class="py-0">
                <v-list-item-content>
                    <v-list-item-title>Application</v-list-item-title>
                    <v-list-item-subtitle>Subtext</v-list-item-subtitle>
                </v-list-item-content>

                <v-divider></v-divider>

                <v-list-item v-for="item in items" :key="item.title" link>
                <v-list-item-icon>
                    <v-icon>{{ item.icon }}</v-icon>
                </v-list-item-icon>

                <v-list-item-content>
                    <v-list-item-title>{{ item.title }}</v-list-item-title>
                </v-list-item-content>
                </v-list-item>
            </v-list>
        </v-navigation-drawer>
    </v-container>
</template>
vuetify.js vue.js
2 Answers

I'm not familiar with the d-block class, and a search of the Vuetify docs didn't show me anything. I would get rid of it; you don't need a d-block class to make the navigation drawer push the content aside when it opens.

That being said, I don't think you want to wrap everything in <v-container> like you're doing. Try structuring your app code like this:

<template>
  <v-app id="app">
    <sidebar />
    <v-content>
      <router-view />
    </v-content>
  </v-app>
</template>

And don't wrap your <v-navigation-drawer> in <v-container>, either. You want it like this:

<template>
  <v-navigation-drawer
    v-model="drawer"
    permanent
    app
    dark
    color="primary"
  >
    // Contents
  </v-navigation-drawer>
</template>

Then, have the views displayed by your <router-view> use <v-container>:

<template>
  <v-container class="fill-height" fluid>
    // View content
  </v-container>
</template>
user_11964650

For anyone looking for a definitive answer, whether the <v-navigation-drawer> component pushes content or overlays it depends on the app property being present. With <v-navigation-drawer app> it becomes part of the app's layout and will resize your content. Without it, it will overlay on top of your content.

See the API documentation here for a good explanation of the app property: https://vuetifyjs.com/en/api/v-navigation-drawer/#api-props

user_103858830
Related