CODEWITHSUNDEEP
vue.jsvuetify.js
Fabio Ramos
Fabio Ramos

Reputation: 33

Vuetify: My navigation drawer is positioned over another element (toolbar)

I would like to put my navigation drawer under the toolbar.

I'm trying to achieve something like this :

enter image description here

I am trying to do something similar but all attempts are unsuccessful, at the moment I have the following: enter image description here

My code:

<template>
 <nav>
   
    <v-snackbar v-model="snackbar" :timeout="4000" top color="success">
      <span>Awesome! You added a new project.</span>
      <v-btn text flat @click="snackbar = false">Close</v-btn>
    </v-snackbar>

        <v-toolbar app clipped-left >
            <v-toolbar-side-icon></v-toolbar-side-icon>
             <v-app-bar-nav-icon  @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
            <v-toolbar-title class="text-uppercase gr ey--text">
                <span class="font-weight-light">estudos</span>
                <span>vue</span>
            </v-toolbar-title>
            <v-spacer></v-spacer>

            <v-menu offset-y>
      <template v-slot:activator="{ on, attrs }">
        <v-btn text
          color="primary"
          dark
          v-bind="attrs"
          v-on="on"
        >
          <v-icon left>expand_more</v-icon>
          <span>Menu</span>
        </v-btn>
      </template>
        <v-list>
          <v-list-item v-for="link in links" :key="link.text" router :to="link.route">
            <v-list-item-title>{{link.text}}</v-list-item-title>
          </v-list-item>
        </v-list>
    </v-menu>

            
            <v-btn text color="grey">
                <span>Sign Out</span>
                <v-icon right>exit_to_app</v-icon>
            </v-btn>
        </v-toolbar>


    

    <v-navigation-drawer  v-model="drawer" app  class="indigo white--text"> 
             <v-app-bar-nav-icon  @click.stop="drawer = !drawer"></v-app-bar-nav-icon>
             <v-layout column align-center>
              <v-flex class="mt-5">
                <v-avatar size="90">
                  <img src="/avatar-64.png">
                </v-avatar>
                <p class="white-text dubheading mt-1">
                  Estudos Vue
                </p>
              </v-flex>
              <v-flex class="mt-4 mb-3">
                <popup @projectAdded="snackbar=true" />
              </v-flex>
             </v-layout>
       <v-list >
        <v-divider></v-divider>

        <v-list-item 
          v-for="link in links"
          :key="link.text"
          router :to="link.route"
        >
          <v-list-item-action >
            <v-icon class="white--text">{{ link.icon }}</v-icon>
          </v-list-item-action>

          <v-list-item-content class="white--text">
            <v-list-item-title>{{ link.text }}</v-list-item-title>
          </v-list-item-content>
        </v-list-item>
      </v-list>
    </v-navigation-drawer>
    
     <v-row>
    <v-col
     
  
    >
      <v-img
      
      max-height="76%"
      max-width="100%"
        src="/imgtest.jpg"
        gradient="to top right, rgba(14,12,11,.51), rgba(14,12,11,.71)"
      >
      <v-img-title class="heading white--text">
        Bien saude</v-img-title></v-img>
    </v-col>

  </v-row>
    </nav>
    
</template>

<script>
import Popup from './Popup'
export default {
    components: { Popup },
    data() {
        return {
            drawer:false,
            links:[
                 {icon: 'dashboard', text:'Dashboard', route:'/'},
                 {icon: 'folder', text:'My Projects', route:'/projects'},
                 {icon: 'person', text:'Team', route:'/team'},

            ],
            items: [
        { title: 'Click Me' },
        { title: 'Click Me' },
        { title: 'Click Me' },
        { title: 'Click Me 2' },
      ],
            snackbar: true
        }
    },
  }
</script>

I tried adding Block and removing the app, but it didn't solve the problem... How do I put my drawer under the toolbar?

Upvotes: 0

Views: 4919

Answers (2)

SneakyLenny
SneakyLenny

Reputation: 553

I would suggest following vuetify.js' default markup first.

Then you'll supposed to use clipped property in the <v-navigation-drawer> element like @mamadou-hady-barry already described. (<v-navigation-drawer clipped app>).

Secondly add the 'clipped-left' to the <v-app-bar> element resulting in: <v-app-bar clipped-left app>. You are currently using <v-toolbar> which does not have a clipped-left property according to their "API".

Upvotes: 0

Mamadou Hady Barry
Mamadou Hady Barry

Reputation: 629

Add clipped to v-navigation-drawer props like: 
<v-navigation-drawer
  clipped>
  <!-- ... -->
</v-navigation-drawer>

Upvotes: 1

Related Questions