childrenコンポーネントの高さがheader分ずれている

[AyumuOgasawara]

概要

childrenコンポーネントの高さが、ヘッダー文を考慮できておらずスクロールが可能である。 heder文の高さを削除する必要がある

バグ確認動画

https://github.com/user-attachments/assets/6fb88c4f-2311-48f5-85ba-10c569992aa5

[AyumuOgasawara]

以下のようにcalcは試した

<Box
  component="main"
  height="calc(100% - 64px)"
  flexGrow={1}
  sx={{
   backgroundColor: "#DDDDDD",
 paddingX: 8,
 }}
>
 {children}
</Box>

結果

heightの大きさはうまくいっているが、結局動く

https://github.com/user-attachments/assets/8f8a17b1-465a-41a5-93e5-d68db31e49b4

[AyumuOgasawara]

そもそもなぜ、headerがずれているか確認する。 lauoutをしてしているところは以下の部分。

<Header />
        <Toolbar />

        <Box display="flex" flexDirection="row" height="100%">
          <Box
            component="main"
            height="100%"
            flexGrow={1}
            sx={{
              backgroundColor: "#DDDDDD",
              paddingX: 8,
            }}
          >
            {children}
          </Box>
          <Sidebar />
        </Box>

[AyumuOgasawara]

// ヘッダーコンポーネントを使う
<Header />

        // ヘッダー分のスペースを確保 [参考](https://zenn.dev/numagotatu/articles/2024-01-14-mui-toolbar)
        <Toolbar />

       // メインとなるページとサイドバーを含めたBox
        <Box display="flex" flexDirection="row" height="100%">
          // メインとなるページを入れるchildrenるBox
          <Box
            component="main"
            height="100%"
            flexGrow={1}
            sx={{
              backgroundColor: "#DDDDDD",
              paddingX: 8,
            }}
          >
            {children}
          </Box>

          // サイドバーコンポーネント
          <Sidebar />
        </Box>

[AyumuOgasawara]

参考 これを見る限り、Boxの中にを入れている。

<Box component="main">
        <Toolbar />
       <Typography variant="h1">タイトル</Typography>
     </Box>

よって、以下のようにする。

/ メインとなるページとサイドバーを含めたBox
 <Box display="flex" flexDirection="row" height="100%">
 <Toolbar />

結果

サイドバーはいいが、childrenはヘッダーの下に隠れている。 また、左に変なスペースができた。

[AyumuOgasawara]

上記の結果は左側にが来てそう

一回を削除する

[AyumuOgasawara]

ここの被ってる分下げればいいため、childrenが入っているBoxにmarginTopを与えてみる。

 <Box
            component="main"
            height="100%"
            marginTop={8}
            flexGrow={1}
            sx={{
              backgroundColor: "#DDDDDD",
              paddingX: 8,
            }}
          >
            {children}
          </Box>

結果

初期値はいいが、やっぱり動く。

https://github.com/user-attachments/assets/10aed369-472a-4cb0-8e50-10207fbf9a33

[AyumuOgasawara]

childrenとSidebarを囲っているBoxにpaddingTopをつける。

<Box display="flex" flexDirection="row" height="100%" paddingTop={8}>
          <Box
            component="main"
            height="100%"
            flexGrow={1}
            sx={{
              backgroundColor: "#DDDDDD",
              paddingX: 8,
            }}
          >
            {children}
          </Box>
          <Sidebar />
        </Box>

結果

うまくできた！

https://github.com/user-attachments/assets/11157a70-5408-473d-ad53-1e124bc185af