【Nuxt.js】ハンバーガーボタンとグロナビを実装する3

[【Nuxt.js】ハンバーガーボタンとグロナビを実装する](https://qiita.com/MasayukiAbe/items/c4ed2d788fbd80b85506 "【Nuxt.js】ハンバーガーボタンとグロナビを実装する")
[【Nuxt.js】ハンバーガーボタンとグロナビを実装する2](https://qiita.com/MasayukiAbe/items/2e9caf651d7748cf4575 "【Nuxt.js】ハンバーガーボタンとグロナビを実装する2")
の続き

#問題
スマホ閲覧時、ハンバーガーメニューから下層ページに遷移したとき、
ハンバーガーメニューが開いたママ

#原因
正直に言うとまだよくわかっていない。
ベタでコーディングしたら、リンクでページ切り替わったら
開いていたメニューは閉じているはず。
多分、Nuxt-linkじゃなくてaタグで実装したら解決するような気もする。
でもせっかくやっているのでどうにかこのまま行きたい。

#解決策
- メニュー内のNuxt-linkをクリックしたとき、ハンバーガーボタンをクリックしたときにメニューを閉じる関数を実行する

ということで、@clickで$emit、親に状態を渡して、とか単純に考えていたら
これやっぱり動かなかった。もうなんでよ！　と思っていたら、「実装する2」で
お世話になった記事に答え書いてあった。あらためて引用する。
（最後までちゃんと読まなくちゃいけないね）

https://mykii.blog/nuxt-hamburger-menu/#i-7

あと、ここも参考にさせてもらった。

https://qiita.com/Ancient_Scapes/items/ea53a9efea6c36c1d4e5

要は、「Nuxt-link」に@clickを追加するときは、`@click.native`と
しなければならないということだった。
早速修正。ついでにメニューは配列で処理するように変更しよう。

##NaviList.vue

```components/molecules/lists/NaviList.vue
<template>
  <ul class="l-navilist">
    <li v-for="navilist in navilists" :key="navilist.path">
      <Nuxt-link :to="navilist.path" @click.native="naviLinkSp">
        {{ navilist.name }}
      </Nuxt-link>
    </li>
  </ul>
</template>

<script>
export default {
  computed: {
    navilists () {
      const navi = [
        {
          path: '/',
          name: 'Home'
        },
        {
          path: '/sample',
          name: 'Sample'
        },
        {
          path: '/api',
          name: 'Api'
        },
        {
          path: '/strage',
          name: 'Strage'
        }
      ]
      return navi
    }
  },
  methods: {
    naviLinkSp () {
      this.$emit('naviLinkSp')
    }
  }
}
</script>
```

- `<Nuzt-link>`に`@click.native="naviLinkSp"`を追加
- `methods`で`$emit`。それを親コンポネントで利用

##HtmlHeader.vue

```components/organisms/HtmlHeader.vue
<template>
  <header id="l-header">
    <div class="l-header_inner">
      <h1>Header</h1>
      <BtnHamburger
        :class="{active : gnaviOn}"
        @btnMenu="toggleMenu"
      />
    </div>
    <transition
      @before-enter="beforeEnter"
      @enter="enter"
      @before-leave="beforeLeave"
      @leave="leave"
    >
      <nav
        v-if="gnaviOn || !isMobile"
        class="gnavi"
      >
        <LstNavi
          @naviLinkSp="toggleMenu"
        />
      </nav>
    </transition>
  </header>
</template>

<script>
import BtnHamburger from '@/components/atoms/buttons/Hamburger'
import LstNavi from '@/components/molecules/lists/NaviList'
export default {
  components: {
    BtnHamburger,
    LstNavi
  },
  data () {
    return {
      gnaviOn: false,
      wWidth: 1025
    }
  },
  computed: {
    isMobile () {
      return this.wWidth < 1024
    }
  },
  mounted () {
    this.wWidth = window.innerWidth
    this.$nextTick(() => {
      window.addEventListener('resize', () => {
        this.wWidth = window.innerWidth
      })
    })
  },
  methods: {
    toggleMenu () {
      this.gnaviOn = !this.gnaviOn
    },
    beforeEnter (el) {
      el.style.height = '0'
    },
    enter (el) {
      el.style.height = el.scrollHeight + 'px'
    },
    beforeLeave (el) {
      el.style.height = el.scrollHeight + 'px'
    },
    leave (el) {
      el.style.height = '0'
    }
  }
}
</script>
```

- `BtnHamburger`で`$emit`を受け取る
- すでに設定済みの`toggleMenu`という関数を呼び出す

##結果
これで納得のいく仕様で実装できた。
***目標1「ハンバーガーボタンとグローバルナビを実装する」***を
達成したことになる。デモサイトができたら実際に動作するところも
確認できるようにするつもり。