Create static left navbar component with Vue

user_1676032 0
Viewed 1132

I need a vertical navbar to the left of my app's layout, and with the content all across the right.

As it stands, I can't do that. My navbar pushes all the content down. How can I fix this?

This is what my App.vue's template looks like:

<template>
    <div id="app">
        <v-app>
            <navbar/>
            <v-main>
                <v-container class="main-container">
                    <router-view/>
                </v-container>
            </v-main>
        </v-app>
    </div>
</template>

For the navbar component I am using vuetify, specifically the mini navbar As per the example code, here is what it currently looks like:

<template>
    <v-navigation-drawer
        v-model="drawer"
        :mini-variant.sync="mini"
        permanent
    >
        <v-list-item class="px-2">
            <v-list-item-avatar>
                <v-img src="https://randomuser.me/api/portraits/men/85.jpg"></v-img>
            </v-list-item-avatar>

            <v-list-item-title>John Leider</v-list-item-title>

            <v-btn
                icon
                @click.stop="mini = !mini"
            >
                <v-icon>mdi-chevron-left</v-icon>
            </v-btn>
        </v-list-item>

        <v-divider></v-divider>

        <v-list dense>
            <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>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';

@Component<Navbar>({})
export default class Navbar extends Vue {
    private value: string = 'home';
    private drawer: boolean = true;
    private items: Array<Object> = [
        { title: 'Home', icon: 'mdi-home-city' },
        { title: 'My Account', icon: 'mdi-account' },
        { title: 'Users', icon: 'mdi-account-group-outline' }
    ]
    private mini: boolean = true;
}
</script>

As mentioned on the top, this is still just pushing all the app's content down. This is what it currently looks like:

enter image description here

What can I do so that on the left I have my navbar but on the right

Edit: For the sake of clarification, I do want the navbar to be vertical, but I just don't want it to push down all the content. Basically I want my app to have a side navigation

vuejs2 vuetify.js vue.js css javascript
2 Answers

Wrap the navbar and main in a <v-row>:

<template>
  <div id="app">
    <v-app>
      <v-row>
        <navbar/>
        <v-main>
          <v-container class="main-container">
            <router-view/>
          </v-container>
        </v-main>
      </v-row>
    </v-app>
  </div>
</template>

By default, v-app has an internal wrapper with flex-direction: column CSS, meaning that its child elements are placed vertically. By wrapping these 2 child elements in a v-row, you place them in a wrapping element with flex-direction: row.

user_21850930

I guess you are misunderstanding the concepts. You are wrapping a v-navigation-drawer inside a navbar component.

In Vuetify v-navigation-drawer is a component used to build Sidebars and that's why your component is on vertical.

You should try to use v-app-bar instead. Here's the documentation: https://vuetifyjs.com/en/components/app-bars/

Edit 1

You can configure an app sidebar or an app navbar using the app option inside the component like that:

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

Just like in the official documentation. If you do it that way, the component will work properly and your content will not be pushed down.

user_116973710
Related