【Bootstrap】ハンバーガーメニュー

## ハンバーガーメニュー

### 完成系画像
![スクリーンショット 2024-04-19 0.08.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3726068/7c483d8c-158f-5638-dedc-93cfe1f23665.png)
![スクリーンショット 2024-04-19 0.09.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3726068/d269a8a9-d0ac-420b-8ce0-b469b02e5b79.png)

### 軽い解説
```
data-toggle="collapse"
```
を使うとハンバーガーメニューを作れる。
以下サイトでデモがあるから見るとわかりやすい。

https://www.tohoho-web.com/bootstrap/collapse.html

### コード
```header.blade.php
<header class="bg-dark mb-3 sticky-top">
    <div class="container">
        <nav class="navbar navbar-dark">
            <a class="navbar-brand mb-0 h1">Daily Budget Tool</a>

            <!-- PC_tab時のヘッダーメニュー -->
            @guest
                <!-- なし -->
            @else
                <div class="header-right pc_tab">
                    <button class="btn btn-success">予算</button>
                    <button class="btn btn-success ml-1">予算登録</button>
                    <button class="btn btn-success ml-1">支出登録</button>
                    <div class="profile-picture profile-picture-header ml-1">
                        <!-- img-fluid：画像を中心にやってくれる(Bootstrap) -->
                        <img class="img-fluid cursor_pointer" src="/assets/sample.jpg" alt="Profile Picture">
                    </div>
                </div>
            @endguest


            <!-- sp時のハンバーガーメニュー -->
            @guest
                <!-- なし -->
            @else
                <!-- ハンバーガー -->
                <button class="navbar-toggler sp" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="{{ __('Toggle navigation') }}">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <!-- メニュー -->
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav ml-auto">
                        <div class="d-flex ml-auto mt-2">
                            <li class="nav-item dropdown">
                                <button class="btn btn-success">予算</button>
                            </li>
                            <li class="nav-item dropdown">
                                <button class="btn btn-success ml-1">予算登録</button>
                            </li>
                            <li class="nav-item dropdown">
                                <button class="btn btn-success ml-1">支出登録</button>
                            </li>
                            <li class="nav-item dropdown">
                                <div class="profile-picture profile-picture-header ml-1">
                                    <img class="img-fluid cursor_pointer" src="/assets/sample.jpg" alt="Profile Picture">
                                </div>
                            </li>
                        </div>
                    </ul>
                </div>
            @endguest
            
        </nav>
    </div>
</header>
```
```style.scss
// ----- sp時のみ表示
.sp {
  display: none;
  @media screen and (max-width: 430px) {
    display: block;
  }
}
```

※アイコン画像出典：https://ll-voice.com/%E3%83%92%E3%83%A5%E3%83%BC%E3%83%9E%E3%83%B3%E3%82%A2%E3%82%AB%E3%83%87%E3%83%9F%E3%83%BC%E5%A3%B0%E5%84%AA%E3%82%B9%E3%82%AF%E3%83%BC%E3%83%AB%E5%A4%9C%E9%96%93%E3%83%BB%E9%80%B1%E6%9C%AB%E8%AC%9B/