XNCOAISNレビュー：ヘッダー

[pitang1965]

7 を分離

• Containerを使用すると良いかも
• Shimabu IT University(styles.title)のスタイルが効いていないです(a:hover等)
• PCの時ダークテーマ切り替えボタンとメニューが離れています(仕様？)
• モバイルのメニューを開いた時、ヘッダー・フッターが見えています(仕様？)

[pitang1965]

@xncoaisn

1. ヘッダー：Container使用： そのようにしました。Groupも用いて、CSS記述を減らしました。
2. styles.titleが効いていない件： 不要CSSを削除、すべて効くよう修正しました。
3. テーマ切り替えボタンとメニューの位置関係： 1の作業時に気が付き修正しました。
4. モバイルメニュー展開時のヘッダー、フッター表示：AppShellを使ったのでこうなってしまいました。これはできればこのままにしたいと思いますがいかがでしょうか？

[XNCOAISN]

@pitang1965

4. デザインについてはお任せします。

全体にしたい場合は、一応下記で出来ました。

.navbar {
  ...
  position: "fixed";
  top: 0;
  height: 100vh;
  z-index: 1001;
}

あとは閉じるボタンをnavbarに追加

[XNCOAISN]

@pitang1965 ヘッダーのタイトル ホバーした時にカーソルが手になると良いかも

aタグを使うか

.title:hover {
  ...
  cursor: "pointer";
}

[pitang1965]

@XNCOAISN ヘッダーのタイトルのホバー時動作追加しました。

4. について全体表示したときに、後ろのバーガーをz-indexに前に出そうとしたらできず。これは他のissueの後で取り組みます。

[pitang1965]

@XNCOAISN 4も対応しました。 z-indexではうまくいかないので、ボタンを追加しないといけないのですね。勉強になりました。

https://developer.mozilla.org/ja/docs/Web/CSS/z-index

<integer>
この整数値は、現在の重ね合わせコンテキストで作られたボックスの重ね合わせレベルです。ボックスは重ね合わせレベル 0 のローカルの重ね合わせコンテキストを作ります。これは、子孫要素の z-index は、この要素の外部にある要素の z-index とは比較されないということです。