Vuetifyのサイドメニューのテンプレ

概要

主に管理画面などのサイドメニューを作る際の個人的なメモ。
たぶん、改良の余地は大量にあると思うので、思いつき次第更新していく予定。
基本的には、Web上で公開されているいろいろな情報の寄せ集めです。。。

<template>
  <v-app>
    <v-navigation-drawer app v-model="drawer" clipped>
      <v-container>
        <v-list-item>
          <v-list-item-content>
            <v-list-item-title class="title grey--text text--darken-2">
              MENU
            </v-list-item-title>
          </v-list-item-content>
        </v-list-item>
        <v-divider></v-divider>
        <v-list dense nav>
          <template v-for="nav_list in nav_lists">
            <v-list-item
              v-if="!nav_list.lists"
              :to="nav_list.link"
              :key="nav_list.name"
            >
              <v-list-item-icon>
                <v-icon>{{ nav_list.icon }}</v-icon>
              </v-list-item-icon>
              <v-list-item-content>
                <v-list-item-title>{{ nav_list.name }}</v-list-item-title>
              </v-list-item-content>
            </v-list-item>
            <v-list-group
              v-else
              no-action
              :prepend-icon="nav_list.icon"
              :key="nav_list.name"
            >
              <template v-slot:activator>
                <v-list-item-content>
                  <v-list-item-title>{{ nav_list.name }}</v-list-item-title>
                </v-list-item-content>
              </template>
              <v-list-item
                v-for="list in nav_list.lists"
                :key="list.name"
                :to="list.link"
                :href="list.link"
                v-bind="list.blank ? {target:'_blank',rel:'noopener noreferrer'}:false"
              >
                <v-list-item-title>{{ list.name }}</v-list-item-title>
              </v-list-item>
            </v-list-group>
          </template>
        </v-list>
      </v-container>
    </v-navigation-drawer>
...

nav_lists の中身はこんな感じ。

nav_lists:[
  { name: 'TOP',
    link: '/',
  },
  { name: 'ユーザー管理',
    icon: 'mdi-account-box',
    link: '/user',
  },
  { name: 'Google',
    lists:[ { name: 'Google Adsense', href: 'https://www.google.com/adsense/app', blank: true},
            { name: 'Google Search Console', href: 'https://www.google.com/webmasters/tools/home?hl=ja', blank: true},
            { name: 'Google Analytics', href: 'http://www.google.com/intl/ja_jp/analytics/', blank: true},
          ]
  },
]