【自作ブログ #9】Layout Componentを作成②

自作ブログを作っています。

yushi-dev.hatenablog.com

技術スタック

• TypeScript
• React
• Next.js
• Styled Components
• GitHub Pages

引き続きLayout Componentを作成していきます。
今回は、メインコンポーネント・サイドメニュー、それらのレスポンシブ対応を行います。

サイドメニュー

サイドメニューを用意します。

サイドメニューは、PC・タブレット表示は固定幅で表示し、スマートフォンではメインコンポーネントの下部に表示します。

内容については、今回はダミー表示のみ行います。

const Aside = styled.aside`
  flex-shrink: 0;
  width: 240px;
  @media (max-width: ${TABLET_MAX_WIDTH}) {
    width: 180px;
  }
  @media (max-width: ${MOBILE_MAX_WIDTH}) {
    width: 100%;
  }
`

const SideMenu = () => {
  return <Aside>This is a side menu.</Aside>
}

メインコンポーネント

続いてメインコンポーネントを表示します。

サイドメニューの配置についても、flexboxを用いてこのコンポーネント内で行います。

const Container = styled.div`
  display: flex;
  justify-content: space-between;
  flex-shrink: 0;
  gap: 50px;
  width: ${TABLET_MAX_WIDTH};
  padding: 0 ${VERTICAL_PADDING};
  margin: 2rem auto 0;
  @media (max-width: ${TABLET_MAX_WIDTH}) {
    width: ${MOBILE_MAX_WIDTH};
  }
  @media (max-width: ${MOBILE_MAX_WIDTH}) {
    flex-direction: column;
    gap: 100px;
    width: 100%;
  }
`

type Props = {
  children: React.ReactNode
}

const MainContainer = ({ children }: Props) => {
  return (
    <Container>
      <main>{children}</main>
      <SideMenu />
    </Container>
  )
}

画面

PC表示

スマホ表示

Pull Request

https://github.com/nek0meshi/blog/pull/11

あとがき

最近は海に行きました。
しょっぱいのは少し苦手です。