CODEWITHSUNDEEP
vue.jsvuetify.js
azmd108
azmd108

Reputation: 107

two v-navigation-drawer side by side

Im trying to have two app navigation drawers side by side, like this

But I cant make it work. I tried to wrap them in a grid to make them appeare side by side, but they seem to be under each other. How do I flip the second navigation-drawer next to the other?

    <v-container>
  <v-row>
    <v-col cols="6">
      <v-navigation-drawer
        v-model="drawer"
        app
        class="Carbon"
        :src="'./nav/' + randomPic"
      >
      </v-navigation-drawer>
    </v-col>
    <v-col cols="6">
      <v-navigation-drawer
        v-model="drawer"
        app
        class="Carbon"
        :src="'./nav/' + randomPic"
      >
      </v-navigation-drawer>
    </v-col>
  </v-row>
</v-container>

Upvotes: 0

Views: 545

Answers (1)

Mani Mirjavadi
Mani Mirjavadi

Reputation: 1073

There is no need to use grid. Just put them inside <v-layout></v-layout> and remove the app. Like this:

  <v-layout>
    <v-navigation-drawer
      v-model='drawer'
      class='Carbon'
      :src="'./nav/' + randomPic"
    >
    </v-navigation-drawer>
    <v-navigation-drawer
      v-model='drawer'
      class='Carbon'
      :src="'./nav/' + randomPic"
    >
    </v-navigation-drawer>
  </v-layout>

Upvotes: 1

Related Questions