手順ヒント

1. メニューの中身を非表示にしよう。

雛形コードの状態では画像のようにメニューの中身が表示されてしまってます。Vueのディレクティブを使ってメニューの中身を非表示にしましょう。

注意点としてはメニューの中身だけでなくメニューを開いた時の背景色も非表示にしましょう。

<!-- メニューの中身 -->
<div class="nav__inner">
  <!-- メニューを閉じるアイコン -->
  <div class="nav__icon nav__icon--times">
    <i class="fas fa-times fa-3x"></i>
  </div>
  <ul class="nav__menu">
    <li class="nav__item">
      <a class="nav__link" href="#">メニュー1</a>
    </li>
    <li class="nav__item">
      <a class="nav__link" href="#">メニュー2</a>
    </li>
    <li class="nav__item">
      <a class="nav__link" href="#">メニュー3</a>
    </li>
    <li class="nav__item">
      <a class="nav__link" href="#">メニュー4</a>
    </li>
  </ul>
</div>
<!-- メニューを開いた時の背景色 -->
<div class="nav__bg"></div>

2. メニューの表示、非表示を管理する。

メニューの中身を非表示に出来たら次に開くアイコンをクリックしたらメニューを開く、閉じるアイコンをクリックしたらメニューを閉じれるようにしましょう。

注意点としてはメニューを開いた時の背景色もメニューの中身と同じように処理を記載しましょう。