【自作ブログ #10】サイドメニューの作成 - スマレジエンジニアyushiのブログ

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

yushi-dev.hatenablog.com

技術スタック

TypeScript
React
Next.js
Styled Components
GitHub Pages

今回はサイドメニューの中身を実装していきます。

サイドメニューの中身

前回は、サイドメニューのレイアウトだけを実装し、レスポンシブ対応などを行いました。

今回はサイドメニューの中身を実装していきます。

サイドメニューの中身は下記のものを用意します。

プロフィール
記事検索
最近の記事

共通ComponentのSectionを用意しておきます。

const Section = styled.section`
  display: flex;
  flex-direction: column;
  gap: 15px;
`

プロフィール

ここではアイコン画像の表示やプロフィール情報・リンクなどの表示を行います。

アイコン画像は、border-radius指定で円形にします。

const StyleImage = styled(Image)`
  border-radius: 50%;
`

const ProfileText = styled.div`
  white-space: pre-wrap;
`

const profileText = `
Webエンジニアのyushiです。
関西の企業で自社サービスを開発しています。
Backend・Frontendが主な専門範囲です。
`

<Section>
  <H2>Profile</H2>
  <StyleImage
    layout="fixed"
    src="/profile.png"
    alt="profile image"
    width={imageSize}
    height={imageSize}
  />
  <ProfileText>
    {profileText}
    {links}
  </ProfileText>
</Section>

検索

検索機能については、次回検索ページ込みで実装します。
今回はinputフォームだけ用意しておきます。

const SearchText = styled.input`
  padding: 5px;
  border: 1px solid #444;
  border-radius: 5px;
`

<Section>
  <H2>Search</H2>
  <SearchText type="search" />
</Section>

最近の投稿

最新の投稿から5件を表示します。

const LatestLinkList = styled.ul`
  padding-inline-start: 0;
  font-size: 1.2rem;
  list-style-type: none;
  li {
    margin-bottom: 10px;
  }
  a {
    text-decoration: none;
  }
`

const articles = matters
  // sortでは元配列を変更してしまうため、concatで事前にcloneする.
  .concat()
  .sort((a, b) => (a.date < b.date ? 1 : -1))
  .slice(0, 5)
  .map(({ slug, title }) => (
    <li key={slug}>
      <a href={'/posts/' + slug}>{title}</a>
    </li>
  ))

<Section>
  <H2>Latest</H2>
  <LatestLinkList>{articles}</LatestLinkList>
</Section>