Как отобразить два v-navigation-ящик рядом друг с другом и иметь возможность скрыть правый от левого?

Question

С помощью Vuetify я хотел бы отобразить два v-navigation-drawer рядом друг с другом и иметь возможность скрыть правый с помощью кнопки в левом.Мой текущий код (см. Ниже) отображает правый ящик над левым, но я хочу, чтобы он отображал правый ящик рядом с левым (см. Экраны ниже).

Я попытался найти что-то полезное в официальномдокументацию и просмотрел несколько примеров шаблонов, но в моем случае ничего не помогло.

Мне удалось найти следующий код:

<template>
  <v-app dark>
    <v-navigation-drawer v-model="leftMenu" app clipped>
      <v-container ma-0 pa-0>
        <v-toolbar flat>
          <span>Some helper toolbar</span>
        </v-toolbar>
      </v-container>

      <v-container pa-1 mt-1>
        <v-layout row wrap>
          <v-list>
            <v-list-tile>
              <v-list-tile-action>
                <span><a @click.stop="toggleRightMenu"><v-icon>android</v-icon> Task Menu</a></span>
              </v-list-tile-action>
            </v-list-tile>
            <v-list-tile>
              <v-list-tile-action>
                <span><v-icon>android</v-icon> Menu Element #1</span>
              </v-list-tile-action>
            </v-list-tile>
          </v-list>
        </v-layout>
      </v-container>
    </v-navigation-drawer>

    <v-navigation-drawer v-model="rightMenu" app clipped>
      <v-container>
        <v-layout>
          <v-list>
            <v-list-tile>
              <v-list-tile-action>
                <span><v-icon>android</v-icon> Testing...</span>
              </v-list-tile-action>
            </v-list-tile>
          </v-list>
        </v-layout>
      </v-container>
    </v-navigation-drawer>

    <v-toolbar app clipped-left>
      <v-toolbar-side-icon @click="leftMenu = !leftMenu"></v-toolbar-side-icon>
      <v-toolbar-title class="headline">
        <span>Testing...</span>
      </v-toolbar-title>
      <v-spacer></v-spacer>
    </v-toolbar>

    <v-content>
      <router-view/>
    </v-content>

    <v-footer app>
      <span>Footer</span>
    </v-footer>
  </v-app>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      leftMenu: true,
      rightMenu: false
    }
  },
  methods: {
    toggleRightMenu() {
      this.rightMenu = !this.rightMenu;
    }
  }
}
</script>

В настоящее время у меня есть следующее: https://i.ibb.co/txdN0X8/current-drawer.png

Я ищу что-то подобное: https://i.ibb.co/b514yyC/target-drawer.png

Answer 1

Хитрость заключается в том, чтобы иметь v-layout, который заполняет высоту и содержит оба навигационных выдвижных ящика.

Еще одна вещь, которую вы должны обязательно применить, это иметь z-index на обоихнавигационных ящиков.В противном случае, когда вы переключаете правую навигацию, она будет идти вверху левой навигации.И когда вы хотите переключить левую навигационную панель, вам действительно нужно переключить оба.

Я создал Codepen , используя ваш пример данных.

<v-toolbar flat>
     <v-toolbar-side-icon @click="toggleLeftMenu"></v-toolbar-side-icon>
          <v-toolbar-title class="headline">
    <span>Testing...</span>
  </v-toolbar-title>
  <v-spacer></v-spacer>
 </v-toolbar> 
<v-layout fill-height>
    <v-navigation-drawer
      style="z-index:2"
      dark
      clipped
      stateless
      v-model="leftMenu"
    >
      <v-container ma-0 pa-0>
    <v-toolbar flat>
      <span>Some helper toolbar</span>
    </v-toolbar>
  </v-container>  
      <v-list>
        <v-list-tile>
          <v-list-tile-action>
            <v-icon @click="rightMenu = !rightMenu">android</v-icon>
          </v-list-tile-action>
          <v-list-tile-content>
             <v-list-tile-title>Task Menu</v-list-tile-title>
        </v-list-tile-content>
        </v-list-tile>
        <v-list-tile>
          <v-list-tile-action>
            <v-icon>android</v-icon>
          </v-list-tile-action>
          <v-list-tile-content>
            <v-list-tile-title>Menu Element #1</v-list-tile-title>
        </v-list-tile-content>
        </v-list-tile>
      </v-list>
    </v-navigation-drawer>
<v-navigation-drawer dark
                     style="z-index:1"
                     v-model="rightMenu"
                     class="pb-0"
                     stateless>
    <v-list>
      <v-list-tile>
          <v-list-tile-action>
            <v-icon>android</v-icon>
          </v-list-tile-action>
          <v-list-tile-content>
            <v-list-tile-title>Testing right nav</v-list-tile-title>
        </v-list-tile-content>
        </v-list-tile>
    </v-list>
  </v-navigation-drawer>
  </v-layout>

Надеюсь, это поможет:)

Answer 2

Вы можете попробовать достичь, имея 2 навигационных ящика. Второй margin-left должен быть эквивалентен первому ящику.

Пожалуйста, посмотрите на эту ручку кода. Надеюсь, это поможет.

https://codepen.io/Jubels/pen/xeazYY?&editable=true&editors=101

<div id="app">
  <v-app id="inspire">
    <v-layout
      wrap
      style="height: 200px;"
    >
      <v-container>
        <v-layout justify-center>
          <v-btn
            color="pink"
            dark
            @click.stop="drawer = !drawer"
          >
            Toggle Drawer 1
          </v-btn>
          <v-btn
            color="pink"
            dark
            @click.stop="drawer2 = !drawer2"
          >
            Toggle Drawer 2
          </v-btn>
        </v-layout>
      </v-container>

      <v-navigation-drawer
        v-model="drawer"
        :mini-variant="mini"
        absolute
        dark
      >
        <v-list class="pa-1">
          <v-list-tile v-if="mini" @click.stop="mini = !mini">
            <v-list-tile-action>
              <v-icon>chevron_right</v-icon>
            </v-list-tile-action>
          </v-list-tile>

          <v-list-tile avatar tag="div">
            <v-list-tile-avatar>
              <img src="https://randomuser.me/api/portraits/men/85.jpg">
            </v-list-tile-avatar>

            <v-list-tile-content>
              <v-list-tile-title>John Leider</v-list-tile-title>
            </v-list-tile-content>

            <v-list-tile-action>
              <v-btn icon @click.stop="mini = !mini">
                <v-icon>chevron_left</v-icon>
              </v-btn>
            </v-list-tile-action>
          </v-list-tile>
        </v-list>

        <v-list class="pt-0" dense>
          <v-divider light></v-divider>

          <v-list-tile
            v-for="item in items"
            :key="item.title"
            @click=""
          >
            <v-list-tile-action>
              <v-icon>{{ item.icon }}</v-icon>
            </v-list-tile-action>

            <v-list-tile-content>
              <v-list-tile-title>{{ item.title }}</v-list-tile-title>
            </v-list-tile-content>
          </v-list-tile>
        </v-list>
      </v-navigation-drawer>
      <v-navigation-drawer :style="`margin-left: ${drawer ? '300px' :  '0'}`"
        v-model="drawer2"
        :mini-variant="mini"
        absolute
        dark
      >
        <v-list class="pa-1">
          <v-list-tile v-if="mini" @click.stop="mini = !mini">
            <v-list-tile-action>
              <v-icon>chevron_right</v-icon>
            </v-list-tile-action>
          </v-list-tile>

          <v-list-tile avatar tag="div">
            <v-list-tile-avatar>
              <img src="https://randomuser.me/api/portraits/men/85.jpg">
            </v-list-tile-avatar>

            <v-list-tile-content>
              <v-list-tile-title>John Leider</v-list-tile-title>
            </v-list-tile-content>

            <v-list-tile-action>
              <v-btn icon @click.stop="mini = !mini">
                <v-icon>chevron_left</v-icon>
              </v-btn>
            </v-list-tile-action>
          </v-list-tile>
        </v-list>

        <v-list class="pt-0" dense>
          <v-divider light></v-divider>

          <v-list-tile
            v-for="item in items"
            :key="item.title"
            @click=""
          >
            <v-list-tile-action>
              <v-icon>{{ item.icon }}</v-icon>
            </v-list-tile-action>

            <v-list-tile-content>
              <v-list-tile-title>{{ item.title }}</v-list-tile-title>
            </v-list-tile-content>
          </v-list-tile>
        </v-list>
      </v-navigation-drawer>
    </v-layout>
  </v-app>
</div>