【CSS】vue-burger-menuにて各コンポーネントで画面サイズ事に表示・非表示を指定したい

#vue-burger-menuにて各コンポーネントで画面サイズ事に表示・非表示を指定したい

Vue.jsで10種類のハンバーガーメニューを「vue-burger-menu」で実装しますを参考に実装しております。

header.vueとchat.vueの２つのコンポーネントでvue-burger-menuの導入をしており、
各コンポーネント内で自身でclassを付けたものはもちろんCSSは適用されるので変更できますが、
vue-burger-menuにて用意されたclassはスコープ内でCSSが適用されない為、
どのようにして各コンポーネントで画面サイズ事に表示・非表示するのか分からない状況です。

$breakpoint-pc: 1440px;
$breakpoint-tablet: 1024px;
$breakpoint-mobile: 600px;

ブレイクポイントとしては、上記のようになるのですが、
header.vueでは画面サイズが「600px」の時のみハンバーガーメニューを表示して
それ以外でが、ハンバーガーメニューを非表示としたいです。

また、chat.vueでは全て画面サイズでハンバーガーメニューを表示したいです。

その為、スタイルにてscope無しでheader.vueにて以下のようにボタンを表示している
bm-burger-buttonに対してdisplay: noneとするとchat.vueにも適用されてしまう為、困っております。

.bm-burger-button{
   @include pc {
    display: none;
  }
   @include tab {
    display: none;
  }
  @include sp {
    display: flex;
    top: 28px;
  }
}

どのようにしたら各コンポーネントで画面サイズ事に表示・非表示と切り替えることができるでしょうか。

分かる方いらっしゃいましたらお力添えを頂きたいです。

よろしくお願いいたします。

#header.vue

html
1<template>
2  <header class="header">
3    <router-link to="/" class="header-ttl neon">
4      <span class="header-ttl-color neon2">C</span>inemary
5    </router-link>
6    <ul class="header-menu">
7      <li>
8        <router-link to="/" class="header-link neon3 flash">HOME</router-link>
9      </li>
10      <li>
11        <router-link to="/about" class="header-link neon3 flash"
12          >ABOUT</router-link
13        >
14      </li>
15      <li>
16        <router-link :to="`/board/${this.uid}`" class="header-link neon3 flash"
17          >POST</router-link
18        >
19      </li>
20      <li>
21        <router-link
22          to="/signup"
23          class="header-link neon3 flash"
24          v-if="!authenticatedUser"
25          >SINGUP</router-link
26        >
27      </li>
28      <li>
29        <router-link
30          to="/signin"
31          class="header-link neon3 flash"
32          v-if="!authenticatedUser"
33          >SINGIN</router-link
34        >
35      </li>
36      <li>
37        <router-link :to="`/mypage/${this.uid}`" class="header-link neon3 flash"
38          >MYPAGE</router-link
39        >
40      </li>
41      <li v-if="authenticatedUser">
42        <button
43          class="header-link neon3 flash"
44          @click="signOut"
45          v-if="authenticatedUser"
46        >
47          SINGOUT
48        </button>
49      </li>
50    </ul>
51
52//ブレイクポイント600px以下の時に表示したいハンバーガーメニュー
53    <slide right disableOutsideClick width="200">
54      <li>
55      <router-link to="/" class="header-link neon3 flash">HOME</router-link>
56      </li>
57      <li>
58      <router-link to="/about" class="header-link neon3 flash"
59        >ABOUT</router-link
60      >
61      </li>
62      <li>
63      <router-link :to="`/board/${this.uid}`" class="header-link neon3 flash"
64        >POST</router-link
65      >
66      </li>
67      <li>
68      <router-link
69        to="/signup"
70        class="header-link neon3 flash"
71        v-if="!authenticatedUser"
72        >SINGUP</router-link
73      >
74      </li>
75      <li>
76      <router-link
77        to="/signin"
78        class="header-link neon3 flash"
79        v-if="!authenticatedUser"
80        >SINGIN</router-link
81      >
82      </li>
83      <li>
84      <router-link :to="`/mypage/${this.uid}`" class="header-link neon3 flash"
85        >MYPAGE</router-link
86      >
87      </li>
88      <li v-if="authenticatedUser">
89        <button
90          class="header-link neon3 flash"
91          @click="signOut"
92          v-if="authenticatedUser"
93        >
94          SINGOUT
95        </button>
96      </li>
97    </slide>
98  </header>
99</template>

#chat.vue

html
1<template>
2  <div class="chat">
3    <div class="chat-header flex">
4      <h1 class="chat-tll flash neon flex">Chat Room</h1>
5      <slide right disableOutsideClick width="200">
6        <router-link to="/" class="header-link neon3 flash">HOME</router-link>
7        <router-link to="/about" class="header-link neon3 flash">ABOUT</router-link>
8        <router-link :to="`/board/${this.uid}`" class="header-link neon3 flash">POST</router-link>
9        <router-link to="/signup" class="header-link neon3 flash" v-if="!authenticatedUser">SINGUP</router-link>
10        <router-link to="/signin" class="header-link neon3 flash" v-if="!authenticatedUser">SINGIN</router-link>
11        <router-link :to="`/mypage/${this.uid}`" class="header-link neon3 flash">MYPAGE</router-link>
12      </slide>
13      <div id="page-wrap"></div>
14    </div>
15    <!--Firebase から取得したリストを描画-->
16    <transition-group name="chat" tag="div" class="list content">
17      <!--chatの中の{ key, name, image, message ,userid }をそれぞれ取得-->
18      <section v-for="{ key, name, image, message, userid, time } in chat" :key="key">
19        <div v-if="userid === user.uid" class="myitem flex">
20          <!-- 自身 -->
21          <!--「画像」の指定-->
22
23          <!--「名前」と「メッセージ」の指定-->
24          <div class="mydetail">
25            <div class="mytime">{{ $dayjs(time).format("HH:mm") }}</div>
26            <div @click.right.prevent="deleteMessage(key)" class="mymessage">
27              <nl2br tag="div" :text="message" />
28            </div>
29          </div>
30          <div class="myimage flex">
31            <img :src="user.photoURL" width="50" height="50" />
32            <div class="myname flex">{{user.displayName}}</div>
33          </div>
34        </div>
35        <div v-else class="otheritem flex">
36          <!-- 自身ではない -->
37          <!--「画像」の指定-->
38          <div class="otherimage flex">
39            <router-link :to="`/mypage/${returnUserData(userid).uid}`">
40              <img
41                :src="
42                  returnUserData(userid)
43                    ? returnUserData(userid).uploadedImage.fileUrl
44                    : preview
45                "
46                width="50"
47                height="50"
48              />
49              <div class="othername flex">
50                {{
51                returnUserData(userid)
52                ? returnUserData(userid).name
53                : "NO NAME"
54                }}
55              </div>
56            </router-link>
57          </div>
58          <!--「名前」と「メッセージ」の指定-->
59          <div class="otherdetail">
60            <div class="othermessage">
61              <nl2br tag="div" :text="message" />
62            </div>
63            <div class="othertime">{{ $dayjs(time).format("HH:mm") }}</div>
64          </div>
65        </div>
66      </section>
67    </transition-group>
68
69    <!-- 入力フォームの設定 -->
70    <div class="message-inner flex">
71      <form action @submit.prevent="doSend" class="form flex">
72        <textarea
73          v-model="input"
74          placeholder="メッセージを入力"
75          :disabled="!user.uid"
76          @keydown.enter.exact.prevent="doSend"
77        ></textarea>
78        <!-- ユーザーでなければ無効化 -->
79        <button type="submit" :disabled="!user.uid" class="send-button">
80          <img src="../assets/電球.jpg" class="send-img" alt="送信" />
81        </button>
82      </form>
83    </div>
84  </div>
85</template>

行動規範の内容に同意します

回答1件

自己解決

シンプルに以下のようにbm-burger-buttonに対してでなくhamburger-menuというclassをつけて、スタイルを適用させたら実装できました。

<slide right disableOutsideClick width="200" class="hamburger-menu">
      <router-link to="/" class="hamburger-link neon3 flash home-link">HOME</router-link>
      <router-link to="/about" class="hamburger-link neon3 flash">ABOUT</router-link>
      <router-link :to="`/board/${this.uid}`" class="hamburger-link neon3 flash">POST</router-link>
      <router-link to="/signup" class="hamburger-link neon3 flash" v-if="!authenticatedUser">SINGUP</router-link>
      <router-link to="/signin" class="hamburger-link neon3 flash" v-if="!authenticatedUser">SINGIN</router-link>
      <router-link :to="`/mypage/${this.uid}`" class="hamburger-link neon3 flash">MYPAGE</router-link>
      <button class="hamburger-link neon3 flash" @click="signOut" v-if="authenticatedUser">SINGOUT</button>
    </slide>

.hamburger-menu{
   @include pc {
    display: none;
  }
   @include tab {
    display: none;
  }
  @include sp {
    display: flex;
  }
}

投稿2021/06/10 14:10

TMTN

総合スコア53

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

【CSS】vue-burger-menuにて各コンポーネントで画面サイズ事に表示・非表示を指定したい

関連した質問