【Nuxt.js】Nuxt実践編：ヘッダーのハンバーガーを閉じるボタンにする

前置き

ヘッダーがスマホではハンバーガーになり🍔
それをクリックすることで
別コンポーネントでメニューを開きます。
その時にハンバーガーボタンを
閉じるボタンに❌変更しましょう🌟

構成

アトミックデザイン

毎度のことなので省きます。
ブログ内検索してみてくださいね✨🔍

使用するもの

layout

ヘッダーやフッターは
基本的にlayoutに入れます💫

【Nuxt.js】Nuxt文法編：layout

CSS

メディアクエリは
変数で設定しておきましょう！
とっても便利です💕

【Nuxt.js】mixin実践編：Sass & mixinで簡単メディアクエリ

❌にするために
transformプロパティを使います🌟

その他

コンポーネントは
いちいち登録が面倒なので
自動でインポートしています。
めちゃくちゃ楽ちんですよ❤️

06: 自動でインポートする

Let's try!

まずは答えを見ずにやってみましょう♪
余白などのCSSや
ヘッダーの中身はお好きにどうぞ！

bodyのmarginなどは
リセットCSSでやっておくと良いですね🙆‍♀️

ticktack…

答え

Point!

layouts/defaultには
HeaderDefaultのみインポート

NavSideはHeaderDefaultにある
ハンバーガーを押すことで開きます🍔🇺🇸
そのためlayoutsに入れるのは
HeaderDefaultのみでOK⭕️

NavSideはposition: fixed;

全体に覆いかぶさる形になるため

閉じるボタン部分

🍔 → ❌
この時にNavSideが
閉じるボタンを多いますが
layoutsにHeaderDefaultが
入っているため問題なくクリックできます💡

CSSは
🍔を覆うdivを基準に位置を決めるため
position: relative;
position: absolute;
を使用しています。

3本の線の位置を
それぞれ決めないと
1本に重なってしまうため
transformプロパティで調整🌟

transform: translate(X軸, Y軸) XorY個別指定, rotate(角度)

<template>
  <div
    class="header header-default"
  >
    <header class="head">
      <div class="container">
        <nav class="nav">
          <ul class="list">
            <li class="item">
              <nuxt-link class="link" to="/">
                <p
                  class="nav-text"
                >
                  TOP
                </p>
              </nuxt-link>
            </li>
            <li class="item">
              <nuxt-link class="link" to="/">
                <p
                  class="nav-text"
                >
                  ABOUT
                </p>
              </nuxt-link>
            </li>
          </ul>
        </nav>
        <div
          class="hamburger"
          :class="{ active: isMenu }"
          @click="isMenu = !isMenu"
        >
          <span class="line" />
          <span class="line center" />
          <span class="line" />
        </div>
      </div>
    </header>
    <NavSide v-if="isMenu" />
  </div>
</template>

<script>
export default {
  data () {
    return {
      isMenu: false,
    }
  },
}
</script>

<style lang="scss" scoped>
  .header-default {
    > .head {
      padding: 0 20px;
      background-color: white;
      box-shadow: 0 0 25px rgba(0, 204, 255, 0.3);
      border-radius: 0 0 16px 16px;

      > .container {
        display: flex;
        align-items: center;
        max-width: 1200px;
        height: 104px;

        @include sp {
          height: 65px;
        }

        > .nav {
          @include sp {
            display: none;
          }

          > .list {
            display: flex;
            padding: 0;
            list-style: none;

            > .item {
              > .link {
                display: block;
                text-align: center;
                text-decoration: none;
                padding-right: 16px;

                > .nav-text {
                  color: #00ccff;
                  font-size: 12px;
                  white-space: nowrap;
                  text-decoration: none;
                }
              }
            }
          }
        }

        > .hamburger {
          display: none;
          position: relative;
          z-index: 7000;

          @include sp {
            display: block;
          }

          > .line {
            position: absolute;
            display: block;
            top: 50%;
            left: 50%;
            width: 28px;
            height: 3px;
            background-color: #00ccff;
            border-radius: 2px;
            margin-bottom: 8px;
            &:first-child {
              transform: translate(-50%, -50%) translateY(-8px);
            }
            &.center {
              transform: translate(-50%, -50%);
            }
            &:last-child {
              transform: translate(-50%, -50%) translateY(8px);
            }
          }

          &.active {
            > .line {
              &:first-child {
                transform: translate(-50%, 0) rotate(45deg);
              }
              &.center {
                display: none;
              }
              &:last-child {
                transform: translate(-50%, 0) rotate(-45deg);
              }
            }
          }
        }
      }
    }
  }
</style>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

<div

class="header header-default"

<nuxt-link class="link" to="/">

class="nav-text"

TOP

</p>

</nuxt-link>

</li>

<nuxt-link class="link" to="/">

class="nav-text"

ABOUT

</p>

</nuxt-link>

</li>

</ul>

</nav>

<div

class="hamburger"

:class="{ active: isMenu }"

@click="isMenu = !isMenu"

</div>

</header>

</div>

</template>

export default {

data () {

return {

isMenu: false,

}

</script>

.header-default {

> .head {

padding: 0 20px;

background-color: white;

box-shadow: 0 0 25px rgba(0, 204, 255, 0.3);

border-radius: 0 0 16px 16px;

> .container {

display: flex;

align-items: center;

max-width: 1200px;

height: 104px;

@include sp {

height: 65px;

}

> .nav {

@include sp {

display: none;

}

> .list {

display: flex;

padding: 0;

list-style: none;

> .item {

> .link {

display: block;

text-align: center;

text-decoration: none;

padding-right: 16px;

> .nav-text {

color: #00ccff;

font-size: 12px;

white-space: nowrap;

text-decoration: none;

}

> .hamburger {

display: none;

position: relative;

z-index: 7000;

@include sp {

display: block;

}

> .line {

position: absolute;

display: block;

top: 50%;

left: 50%;

width: 28px;

height: 3px;

background-color: #00ccff;

border-radius: 2px;

margin-bottom: 8px;

&:first-child {

transform: translate(-50%, -50%) translateY(-8px);

}

&.center {

transform: translate(-50%, -50%);

}

&:last-child {

transform: translate(-50%, -50%) translateY(8px);

}

&.active {

> .line {

&:first-child {

transform: translate(-50%, 0) rotate(45deg);

}

&.center {

display: none;

}

&:last-child {

transform: translate(-50%, 0) rotate(-45deg);

}

</style>

<template>
  <div class="header header-default-sp">
    <div class="container">
      <ul class="list">
        <li class="item">
          <nuxt-link class="link" to="">
            <p
              class="nav-text"
            >
              TOP
            </p>
          </nuxt-link>
          <nuxt-link class="link" to="">
            <p
              class="nav-text"
            >
              ABOUT
            </p>
          </nuxt-link>
        </li>
      </ul>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.header-default-sp {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 204, 255, 0.2);

  > .container {
    padding-top: 160px;
    > .list {
      padding: 0;
      list-style: none;

      > .item {
        > .link {
          text-align: center;
          text-decoration: none;

          > .nav-text {
            color: #00ccff;
          }
        }
      }
    }
  }
}
</style>

<nuxt-link class="link" to="">

class="nav-text"

TOP

</p>

</nuxt-link>

<nuxt-link class="link" to="">

class="nav-text"

ABOUT

</p>

</nuxt-link>

</li>

</ul>

</div>

</template>

.header-default-sp {

position: fixed;

top: 0;

width: 100%;

height: 100vh;

background-color: rgba(0, 204, 255, 0.2);

> .container {

padding-top: 160px;

> .list {

padding: 0;

list-style: none;

> .item {

> .link {

text-align: center;

text-decoration: none;

> .nav-text {

color: #00ccff;

}

</style>

<template>
  <div>
    <HeaderDefault />
    <nuxt />
  </div>
</template>

<div>

</div>

</template>

まとめ

変更できれば
わざわざ閉じるボタンを
別途作成する必要がないので
良いですよね💕

実践編が増えてきたので
アトミックデザインなど、
そろそろ感覚が
掴めてきたのではないでしょうか？🌟🤗