bootsrtapVueの<b-navbar>で超簡単レスポンシブ対応ヘッダー！！(サンプルコードあり)

#はじめに

私、完全な初学者でVue.jsを使用して簡単なポートフォリオサイトを作成しようとしていたところレスポンシブ対応がとても面倒臭く感じました。何か簡単にできないかと調べていたところ、発見した記事を参考にして作成したbootstrap4のクラスを使用しましたが、ハンバーガーメニューを押しても反応しなかっため、途方に暮れていました。しかし、根気よく調べているとbootstrapVueの<b-navbar>を使用すると簡単に、しかもちゃんと反応するものを作成できたので紹介します！最後にヘッダーのvueファイルをサンプルコードとして記載しています。

一部表現が間違っている部分があるかもしれません。ご了承ください。

##対象者

vue-cliでプロジェクトを作成してvueファイルを使用している方

プロジェクトの作り方やbootstrapVueを使用できるようにすることは他の方の記事を参考にしてください。

##<b-navbar>とは

ここから先の説明は基本的にはbootstrapVueの公式ドキュメント(https://bootstrap-vue.org/docs/components/navbar) に載っているものを扱います。

<b-navbar>コンポーネントは、ブランディング、ナビゲーション、その他の要素を簡潔なヘッダーに配置するラッパーです。簡単に拡張でき、<b-collapse>コンポーネントのおかげで、レスポンシブな動作を簡単に統合することができます。

以下、公式ページに載っているサンプルコード↓に沿って、ハンバーガーメニューに必要な最低限の要素について説明をしていきます。

sample

<div>
  <b-navbar toggleable="lg" type="dark" variant="info">
    <b-navbar-brand href="#">NavBar</b-navbar-brand>
    <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
    <b-collapse id="nav-collapse" is-nav>
      <b-navbar-nav>
        <b-nav-item href="#">Link</b-nav-item>
        <b-nav-item href="#" disabled>Disabled</b-nav-item>
      </b-navbar-nav>

      <!-- Right aligned nav items -->
      <b-navbar-nav class="ml-auto">
        <b-nav-form>
          <b-form-input size="sm" class="mr-sm-2" placeholder="Search"></b-form-input>
          <b-button size="sm" class="my-2 my-sm-0" type="submit">Search</b-button>
        </b-nav-form>

        <b-nav-item-dropdown text="Lang" right>
          <b-dropdown-item href="#">EN</b-dropdown-item>
          <b-dropdown-item href="#">ES</b-dropdown-item>
          <b-dropdown-item href="#">RU</b-dropdown-item>
          <b-dropdown-item href="#">FA</b-dropdown-item>
        </b-nav-item-dropdown>

        <b-nav-item-dropdown right>
          <!-- Using 'button-content' slot -->
          <template v-slot:button-content>
            <em>User</em>
          </template>
          <b-dropdown-item href="#">Profile</b-dropdown-item>
          <b-dropdown-item href="#">Sign Out</b-dropdown-item>
        </b-nav-item-dropdown>
      </b-navbar-nav>
    </b-collapse>
  </b-navbar>
</div>

##説明

####<b-navbar>

これで全体を囲む

プロパティ

toggleable=“lg” ブレイクポイント（どの大きさでハンバーガーメニューに切り替えるか）決める
type=“dark"　　　色を決める
variant=“info"　色を決める（おそらく背景）

typeとvariantに設定する文字はbootstrapお馴染みの文字なので調べると出てきます。コードのdark,infoの部分をお好みで変更してください
toggleableに関しても指定する文字はbootstrapお馴染みのsmなどのサイズ指定の文字なので調べたら出てくると思います。お好みでlgの部分をお好みで変更してください。

####<b-navbar-brand>

サイト全体のロゴを表示するコンポーネント
<a>タグみたいに<b-navbar-brand>文字</b-navbar-brand>で囲って文字を表示

プロパティ

href=“”orto=“”

vue-routerを使っている場合はhrefではなく<router-link>のプロパティ同様で指定

####<b-navbar-toggle target="nav-collapse"></b-navbar-toggle>

ハンバーがメニューを押したら出てくる要素の指定(target)

プロパティ

target

適当な文字列を指定
その文字列をidプロパティで保持するタグをハンバーガーに追加

####<b-navbar-nav>

ヘッダーのどこに配置するかを決めるためのコンポーネント
この小要素が主要な表示するものになる

例

//デフォルトで左よせ(多分)
<b-navber-nav>

</b-navbar-nav>

//ml-auto bootstrap4のクラス(margin-left:auto;の意味)を使用して右よせ
<b-navber-nav class=“ml-auto">
　　　
</b-navbar-nav>

####<b-navbar-item>

<b-navbar-nav>が子要素として持てるタグの１つ
リンクのために使用使用法は<a>タグと一緒

<b-navbar-brand>同様urlの指定はhref=“”,router-linkの指定はto=“"で行う

以上が使用するものになります。

他にも<b-navber-nav>が子要素として持てるとして<b-nav-item-dropdown>、<b-nav-text>、<b-nav-form>などありますが、詳しく知りたい方は上記に載せたbootstrapVue公式を参照してください。

最後にヘッダーを作成するサンプルコードを載せておきます。
下の例では vue-router でルーティングしています。

また、ヘッダーを上部で固定しています。

サンプルコード

myheader.vue

<template>
  <div class="myheader">  
    <b-navbar toggleable="sm" type="dark" variant="info">
      <b-navbar-brand to=“/“>HOME</b-navbar-brand>
      <b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
      <b-collapse id="nav-collapse" is-nav>
        <b-navbar-nav>
          <b-nav-item to="/about">about</b-nav-item>
          <b-nav-item to="/game">game</b-nav-item>
          <b-nav-item to="/paint">paint</b-nav-item>
          <b-nav-item to="/scrap">scrap</b-nav-item>
        </b-navbar-nav>
      </b-collapse>
    </b-navbar>
  </div>
</template>

<style lang="scss" scoped>
.myheader {
  position: fixed;
  width: 100%;
  z-index: 1;
}
</style>