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

こちらの記事の続き
ハンバーガーボタンクリックでそこそこいい感じにグローバルナビを
表示する実装ができたと思ったらPC閲覧時に全然だめだったので
どうにかしなければならないということ。

問題

グローバルナビがPCだと表示されない

原因

components/organisms/HtmlHeader.vueで、
gnaviOnがtrueかfalseかで表示非表示を制御しているため、
そもそもハンバーガーボタンを表示していないPC版では
グロナビを表示させる手段がない

解決策

表示させる条件を、

• gnaviOnがtrueのとき
• スマホじゃないとき

の2つが揃ったときに変更する（してはどうだろうか）

ということで、調べてみると、すごくわかりやすくまとめて
くれている人がいた。

最初からここに書いてあるとおりにやっていればよかった。
と思ったけれど、まずは自分で考えたことに意味があると言い聞かせつつ、
コピペ 参考にしてcomponents/organisms/HtmlHeader.vueを
修正していく。

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 />
      </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>

• v-if="gnaviOn || !isMobile"に条件を変更
• dataでwWidthをreturn
• computedでisMobileを設定
• mountedでウィンドウの横幅を取得（リサイズ時にも対応してる）、wWidthに代入

結果

これでばっちりPCでもグロナビが表示されるようになった。
いいね！

と、思ったものの、作業を進めていくうちに別の問題が発生した。
やっぱりいろいろ難しい……。