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

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

問題

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

原因

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

解決策

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

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

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

要は、「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「ハンバーガーボタンとグローバルナビを実装する」***を
達成したことになる。デモサイトができたら実際に動作するところも
確認できるようにするつもり。