vue vuetify

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons">
    <link rel="stylesheet" href="//unpkg.com/vuetify@1.5.18/dist/vuetify.min.css">
    <link rel="stylesheet" href="//cdn.materialdesignicons.com/3.5.95/css/materialdesignicons.min.css">
    <link rel="stylesheet" href="style.css">
    <script src="//unpkg.com/babel-polyfill/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
    <script src="//unpkg.com/vuetify@1.5.18/dist/vuetify.min.js"></script>
  </head>
  <body>
    <h1>Hello Plunker!</h1>
    <v-app id="app">
      <v-content app="app">
        <v-toolbar class="mt-4" flat="flat" dark="dark" color="green" height="56px">
          <v-toolbar-title class="mr-2">ロゴ</v-toolbar-title>
          <v-sheet class="mr-2" color="green darken-2">
            <v-icon>arrow_drop_down</v-icon>
          </v-sheet>
          <v-menu offset-y="offset-y" nudge-bottom="16px">
            <v-layout class="ml-3 header__item" slot="activator" align-center="align-center"><span>{{ home.title }}</span>
              <v-icon class="header__item__icon--drop" size="18px" light="light">arrow_drop_down</v-icon>
            </v-layout>
            <v-list dense="dense">
              <v-list-tile v-for="link in home.links" :to="link.to" :key="link.text">
                <v-list-tile-action>
                  <v-icon>{{ link.icon }} </v-icon>
                </v-list-tile-action>
                <v-list-tile-content>
                  <v-list-tile-title>{{ link.text }}</v-list-tile-title>
                </v-list-tile-content>
              </v-list-tile>
            </v-list>
          </v-menu>
          <v-menu offset-y="offset-y" nudge-bottom="16px">
            <v-layout class="ml-3 header__item" slot="activator" align-center="align-center"><span>{{ comunity.title }}</span>
              <v-icon class="header__item__icon--drop" size="18px" light="light">arrow_drop_down</v-icon>
            </v-layout>
            <v-list dense="dense">
              <template v-for="link in comunity.links">
                <v-divider class="my-1" v-if="link.divider"></v-divider>
                <v-list-tile v-else="v-else" :key="link.text" :to="link.to" :href="link.href" :target="link.href &amp;&amp; '_blank'" rel="noopener noreferrer">
                  <v-list-tile-action>
                    <v-icon>{{ link.icon }} </v-icon>
                  </v-list-tile-action>
                  <v-list-tile-content>
                    <v-list-tile-title>{{ link.text }}</v-list-tile-title>
                  </v-list-tile-content>
                </v-list-tile>
              </template>
            </v-list>
          </v-menu>
        </v-toolbar>
      </v-content>
    </v-app>
   <script src="script.js"></script> 
  </body>
</html>



new Vue({
  el: "#app",
  data: function() {
    return {
      home: {
        title: "ホーム",
        links: [{
          icon: "trending_up", 
          text: "トレンド", 
          to: "/trend"
        }, {
          icon: "list", 
          text: "タイムライン", 
          to: "/timeline"
        }, {
          icon: "local_offer",
          text: "タグフィード", 
          to: "/tag-feed"
        }, {
          icon: "flag",
          text: "マイルストーン", 
          to: "/milestones"
        }]
      },
      comunity: {
        title: "コミュニティ",
        links: [{
          icon: "group",
          text: "ユーザ一覧", 
          to: "/users"
        }, {
          icon: "domain", 
          text: "Organization一覧", 
          to: "/organizations"
        }, { 
          icon: "event_note",
          text: "アドベントカレンダー", 
          to: "/advent-clendar"
        }, { 
          divider: true
        }, { 
          icon: "forum",
          text: "Qiitadon(β)", 
          href: "https://qiitadon.com"
        }, { 
          icon: "note",
          text: "Qiita:Zine",
          href: "https://zine.qiita.com/?utm_source=qiita&utm_medium=referral&utm_content=header"
        }, { 
          divider: true 
        }, { 
          icon: "book",
          text: "コミュニティガイドライン", 
          href: "https://help.qiita.com/ja/articles/qiita-community-guideline" 
        }, { 
          icon: "book", 
          text: "良い記事を書くために", 
          href: "https://help.qiita.com/ja/articles/qiita-article-guideline" 
        }]
      } 
    };
  }
});

/* Styles go here */

.header__item:hover .header__item__icon--drop {
  color: #fff;
}