Vue.jsにてchatページ作成しましたが、ヘッダー部を非表示に（chatページ以外はヘッダーを表示したいです）したいです

【Vue.js + Firebase】 vue.jsとcssについての質問です

プログラミング勉強をし始めて約４ヶ月とまだまだ浅く、日々勉強中の社会人です。

上記、記事を参考にさせて頂き、初めてのチャット機能を実装したいのですが、下記実装したく投稿させて頂きました。

初歩的なことになるのですが、vue-cli環境にて構築しているのですが、下記コードをcomponentsフォルダに
chat.vueという名前で作っているのですが、header部が常に上記にある状態です。

chatページのみ、ヘッダー部を非表示に（chatページ以外はヘッダーを表示したいです）したいのですが、
どのように記述したら実現できるのでしょうか。。

勉強し始めたばかりなので至らぬ点が多いかとお思いますが、どこをどう直したら良いかご教授いただけると幸いです。
宜しくお願い致します。

ソースコード

HTML
1<template>
2  <div class="chat flex">
3    <h1 class="chat-tll flex">Chat Room</h1>
4
5    <!--Firebase から取得したリストを描画-->
6    <transition-group name="chat" tag="div" class="list content">
7      <section
8        v-for="{ key, name, image, message } in chat"
9        :key="key"
10        class="item"
11      >
12        <!--「画像」の指定-->
13        <div class="item-image">
14          <img :src="image" width="40" height="40" />
15        </div>
16        <!--「名前」と「メッセージ」の指定-->
17        <div class="item-detail">
18          <div class="item-name">{{ name }}</div>
19          <div class="item-message">
20            <nl2br tag="div" :text="message" />
21          </div>
22        </div>
23      </section>
24    </transition-group>
25
26    <!-- 入力フォームの設定 -->
27    <form action="" @submit.prevent="doSend" class="form flex">
28      <textarea
29        v-model="input"
30        placeholder="メッセージを入力"
31        :disabled="!user.uid"
32        @keydown.enter.exact.prevent="doSend"
33      ></textarea>
34      <button type="submit" :disabled="!user.uid" class="send-button">
35        <img src="../assets/矢印icon.jpg" class="send-img" alt="送信" />
36      </button>
37    </form>
38  </div>
39</template>
40

js
1<script>
2import firebase from "firebase";
3import Nl2br from "vue-nl2br";
4// 改行を <br> タグに変換するモジュール
5
6export default {
7  components: { Nl2br },
8  data() {
9    return {
10      user: {}, // ユーザー情報
11      chat: [], // 取得したメッセージを入れる配列
12      input: "", // 入力したメッセージ
13    };
14  },
15  created() {
16    firebase.auth().onAuthStateChanged((user) => {
17      this.user = user ? user : {};
18      const ref_message = firebase.database().ref("message");
19      if (user) {
20        this.chat = [];
21        // message に変更があったときのハンドラを登録
22        ref_message.limitToLast(10).on("child_added", this.childAdded);
23      } else {
24        // message に変更があったときのハンドラを解除
25        ref_message.limitToLast(10).off("child_added", this.childAdded);
26      }
27    });
28  },
29  methods: {
30    // スクロール位置を一番下に移動
31    scrollBottom() {
32      this.$nextTick(() => {
33        //絶対値からbody要素の高さを取得
34        window.scrollTo(0, document.body.clientHeight);
35      });
36    },
37    childAdded(snap) {
38      //childAdded：データベースからアイテムのリストを取得する関数
39      // 受け取ったメッセージをchatに追加
40      const message = snap.val();
41      // データベースに新しい要素が追加されると随時呼び出される
42      this.chat.push({
43        key: snap.key,
44        name: message.name,
45        image: message.image,
46        message: message.message,
47      });
48      this.scrollBottom();
49    },
50    doSend() {
51      if (this.user.uid && this.input.length) {
52        // firebase にメッセージを追加
53        firebase
54          .database()
55          .ref("message")
56          .push(
57            {
58              message: this.input,
59              name: this.user.displayName,
60              image: this.user.photoURL,
61            },
62            () => {
63              this.input = ""; // フォームを空にする
64            }
65          );
66      }
67    },
68  },
69};
70</script>

css
1<style scoped lang="scss">
2@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@1,500&display=swap");
3
4.header {
5  display: none;
6}
7
8.chat {
9  width: 100%;
10  flex-direction: column;
11  &-tll {
12    width: 100%;
13    color: #fff;
14    font-family: "Roboto", sans-serif;
15    background-color: #000000;
16    padding: 1rem 3rem;
17    position: sticky;
18    top: 0;
19    z-index: 999;
20  }
21  .content {
22    margin: 0 auto;
23    padding: 0 10px;
24    max-width: 600px;
25    .item {
26      position: relative;
27      display: flex;
28      align-items: flex-end;
29      margin: 0.8em;
30    }
31    .item-image {
32      img {
33        border-radius: 20px;
34        vertical-align: top;
35      }
36    }
37    .item-detail {
38      margin: 0 0 0 1.4em;
39      .item-name {
40        font-size: 75%;
41      }
42      .item-message {
43        display: inline-block;
44        position: relative;
45        margin: 0 0 0 20px;
46        padding: 10px;
47        max-width: 460px;
48        border-radius: 12px;
49        background: #00ec0ccb;
50        z-index: 5;
51      }
52      .item-message::before {
53        position: absolute;
54        content: " ";
55        display: block;
56        left: -16px;
57        bottom: 12px;
58        border: 4px solid transparent;
59        border-right: 12px solid #00ec0ccb;
60      }
61    }
62  }
63  .list {
64    width: 100%;
65    margin-bottom: 100px;
66  }
67  .form {
68    width: 98%;
69    position: fixed;
70    bottom: 0;
71    height: 3rem;
72    textarea {
73      width: 100%;
74      height: 3em;
75      border: 1px solid #ccc;
76      border-radius: 25px;
77      resize: none;
78      margin-right: 0.5rem;
79      padding: 0.65rem;
80      outline: none;
81    }
82    .send-button {
83      width: 2rem;
84      height: 2rem;
85      cursor: pointer;
86      border: none;
87      outline: none;
88      .send-img {
89        width: 100%;
90        height: 100%;
91      }
92    }
93  }
94}
95
96/* トランジション用スタイル */
97.chat-enter-active {
98  transition: all 1s;
99}
100.chat-enter {
101  opacity: 0;
102  transform: translateX(-1rem);
103}
104</style>
105