サイドバーSidebar

「サイドバー（Sidebar）」を実装してください。

## これは何か
本文の横に細長く置く領域。同じ階層のページ一覧や、絞り込み条件を並べる。

## 使いどころ
- 同じ階層のページを行き来させたいとき。辞典やマニュアルの目次に向く
- 絞り込み条件を本文と並べて操作させたいとき

## 実装の要件
- position: sticky + height: 100dvh + overflow-y: auto で、本文と別にスクロールさせる
- 本文側との境界は border で引く
- 画面が狭いと本文が読めなくなる。900px前後で畳んでドロワーに変える
- 長い一覧を入れるときは、サイドバー自身をスクロールさせて本文と独立させる
- 本文との境目が分からないと、どちらが主役か伝わらない。境界線か背景色で区切る

## アクセシビリティの要件
- nav 要素にして aria-label を付ける。ページ内に nav が複数あるときは必須
- 現在地の項目に aria-current="page" を付ける
- 「本文へ飛ぶ」スキップリンクを用意し、毎回メニューを読み飛ばせるようにする

## 参考にする実装
この形を出発点にして、プロジェクトの命名規則・色・余白に合わせて調整してください。

```html
<nav class="x-sidebar" aria-label="ガイドの目次">
  <p class="x-sidebar__t" id="x-sidebar-t">ガイド</p>
  <ul aria-labelledby="x-sidebar-t">
    <li><a href="/guide/start/" aria-current="page">はじめに</a></li>
    <li><a href="/guide/setup/">初期設定</a></li>
    <li><a href="/guide/faq/">困ったとき</a></li>
  </ul>
</nav>
```

```css
/* 貼った先のリセットに頼らないよう、この部品の中だけ border-box にする */
.x-sidebar,
.x-sidebar *:not([class*="fa-"]),
.x-sidebar *:not([class*="fa-"])::before,
.x-sidebar *:not([class*="fa-"])::after {
  box-sizing: border-box;
  /* 貼った先の既定の書体に引きずられないようにする。書体が変わると
     文字の幅と高さが変わり、枠のサイズまでずれる */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Noto Sans JP", "Yu Gothic UI", Meiryo, sans-serif;
}

.x-sidebar {
  width: 168px;
  padding: 12px;
  border-right: 1px solid #e3e6ea;
  background: #fff;
}
.x-sidebar__t {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #606a7b;
}
.x-sidebar ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.x-sidebar a {
  display: block;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 12px;
  color: #1b2028;
  text-decoration: none;
}
.x-sidebar a:hover {
  background: #f1f3f6;
}
.x-sidebar a[aria-current="page"] {
  background: #eef2ff;
  color: #1d4ed8;
  font-weight: 700;
}
```

## 出力の約束
- HTML と CSS を分けて出す。JavaScript が要るときは素の JavaScript で書き、UIフレームワークは使わない。
- 参考実装がアイコンに Font Awesome のクラスを使っている場合は、プロジェクトで使っているアイコンかインライン SVG に置き換えてよい。
- 上のアクセシビリティ要件を満たす。満たせない箇所があるときは、理由を添えて先に知らせる。
- 色・角丸・余白は既存のデザイントークンがあればそれを使う。無ければ CSS 変数として切り出す。