Блог

Я хотел бы поместить свой навигационный ящик под панель инструментов.

Я пытаюсь добиться чего-то подобного :

Я пытаюсь сделать что-то подобное, но все попытки безуспешны, на данный момент у меня следующее:

Мой код:

 <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>

 

Я попытался добавить блок и удалить приложение, но это не решило проблему…
Как мне поместить свой ящик под панель инструментов?

Я бы предложил следующее vuetify.js «сначала разметка по умолчанию.

Затем вы должны использовать clipped свойство в <v-navigation-drawer> элементе, как уже описано @mamadou-hady-barry. ( <v-navigation-drawer clipped app> ).

Во-вторых, добавьте «обрезанный левый» к <v-app-bar> элементу, в результате чего: <v-app-bar clipped-left app> . В настоящее время вы используете <v-toolbar> , который не имеет clipped-left свойства в соответствии с их «API«.