管理画面フォーマット制作編 #4
サイドバーのメニューと参照中ページの同期

Next.js App Router + shadcn/ui のサイドバーで「いま見ているページ」を正しくハイライト

初回公開日2025/8/19

最終更新日2025/8/19

0. はじめに

前回までの記事で管理画面レイアウト・ユーザ管理を仕上げました。

まだ、メニューと現在参照中のページを同期ができていません。本記事では、メニュー定義を1か所に集約し、現在のURLから“最長一致”で1つだけ現在地を決めるというシンプルな仕組みで、この悩みを解決します。ページ本体はSSRのまま据え置き、サイドバー側でだけ判定します。

何を解決するか（要点を一望）

典型的なつまずき	解き方のコア	画面での結果
ハイライトがズレる	`usePathname()` のURLとメニュー定義を照合し、最長一致で1件だけ選ぶ	“そのページを代表するリンク”にだけ `aria-current="page"` が付く
動的ルートが扱いにくい	子に該当が無ければ親（例：`/users`）にフォールバック	`/users/U00000001` では「ユーザ管理」が強調される
親メニューの開閉がバラつく	現在地の祖先を自動展開	迷子になりにくいサイドバーになる

具体的な仕様は下記の通りです：

txt

【ブラウザの現在URL】
   └─ usePathname() で取得 → 例: "/users/U00000001"
                 │
                 ▼
【メニュー定義（単一出所のツリー）MENU: MenuNode[]】
  ┌──────────────┐
  │ 設定 (/settings)     │
  │  └─ ユーザ管理 (/users) ──┐
  │      ├─ 一覧 (/users)     │ (match: "exact")
  │      └─ 新規 (/users/new) │ (match: "exact")
  └──────────────┘             │
                 │             │（※ 動的URL /users/[id] は
                 │             │   子に列挙せず“親 /users”が受ける）
                 ▼
【現在地判定フック useActive(MENU)】
  1) ツリーをフラット化（親子関係も保持）
  2) ノードごとに pathname と照合して “スコア” 計算
     - match: "exact"  → 完全一致なら 1000 + href長
     - match: "prefix" → 前方一致なら href長
     - match: "regex"  → 正規表現の一致長（必要時のみ）
  3) 最大スコアのノード = active
  4) active の祖先ノードもたどって配列に
                 │
                 ▼
【NavMain 描画】
  - active のリンクに aria-current="page"
  - active または祖先ノードのグループを展開（open）
  - data-active="true" などで太字/ハイライト
                 │
                 ▼
【結果の見え方（例）】
  URL: /users/U00000001
   → 子に exact が無いので親 "/users" が最長一致で勝ち
   → サイドバーでは「ユーザ管理」が太字（aria-current="page"）
   → 「設定」グループも自動で開く

下図のようにメニューと表示中のページが一致する状態になることを目指します。

前提（ここだけ目を通せばOK）

本記事は、下記の続きとなります。

「 管理画面フォーマット制作編 #3 Shadcn/uiで作るユーザ管理UI ─ 詳細・新規・編集フォーム実装 」

すでに Next.js App Router + shadcn/ui のレイアウト と ユーザ管理ページ群（/users、/users/new、/users/[displayId]）がある前提です。参考として、ログイン後レイアウトとユーザ管理UIの記事が整っていれば十分です。なお、ページ本体（page.tsx）は変更しません。サイドバー側の最小追加で同期させます。

この先で触るファイル（最小セット）

役割	ファイル名	何を入れるか
単一出所のメニュー	`menu.schema.ts`	タイトル・URL・`match`（`"exact"` / `"prefix"` / `RegExp`）・子ノード
現在地の判定	`use-active.ts`	`usePathname()` → スコア方式で最長一致 → 現在地と祖先を返す
リンクの薄いラッパ	`nav-link.tsx`	`aria-current="page"` とクラス切替を標準化
既存サイドバー	`app-sidebar.tsx`	`<nav aria-label="メインメニュー">` など a11y 属性を付与して組み込む

a11y（アクセシビリティ）はここだけ押さえる

ルール	付ける場所	何が伝わるか
`<nav aria-label="メインメニュー">`	サイドバーの外枠	ランドマークとして「ここがメインメニュー」と分かる
`aria-current="page"`	“今いるページ”のリンク1つだけ	スクリーンリーダーで「現在のページ」と読まれる
`aria-expanded` / `aria-controls`	親メニューの開閉ボタン／サブメニュー	開いている／閉じている状態が伝わる

技術スタック

Tool / Lib	Version	Purpose
React	19.x	UIの土台。コンポーネント/フックで状態と表示を組み立てる
Next.js	15.x	フルスタックFW。App Router/SSR/SSG、動的ルーティング、メタデータ管理
TypeScript	5.x	型安全・補完・リファクタリング
shadcn/ui	latest	RadixベースのUIキット
Tailwind CSS	4.x	ユーティリティファーストCSSで素早くスタイリング

1. メニュー定義を“単一出所”に（`menu.schema.ts`）

「どのリンクを太字にするか」を1か所の定義から決められるようにします。
ここで作るのは――

型（MenuNode）：タイトル・URL・match 方式（"exact" | "prefix" | "regex"）・子ノード（ツリー）
実データ（MENU）：ダッシュボード、設定＞ユーザ管理（一覧・新規）の最小セット

“単一出所”にすると、ページ側（/users, /users/new…）は無改造のまま、サイドバーだけで同期が完結します。

src/lib/sidebar/menu.schema.tsを下記の内容で作成します：

tsx

/**
 * src/lib/sidebar/menu.schema.ts
 * 「型」と「メニュー定義」を1ファイルに集約（単一出所）
 */
import type { LucideIcon } from "lucide-react";
import { SquareTerminal, BookOpen, Settings2 } from "lucide-react";

/** どのルールでURL一致を判定するか */
export type MatchMode = "exact" | "prefix" | "regex";

/** 1つのメニュー要素（ツリーの節） */
export type MenuNode = {
  /** 安定したキー（href が変わっても差分検知しやすくするなら独立ID推奨） */
  id: string;
  /** ラベル（サイドバーに表示） */
  title: string;
  /** 対応するURL（絶対パス。トレーリングスラッシュは付けない） */
  href: string;
  /** アイコン（任意） */
  icon?: LucideIcon;
  /**
   * URLの一致方法：
   * - "exact": 完全一致（例 /users と /users だけ一致）
   * - "prefix": 前方一致（例 /users 配下すべて）
   * - "regex": 正規表現で高度な一致（必要時のみ）
   *
   * 指定がなければ "prefix" を既定とするのが実務的です。
   */
  match?: MatchMode;
  /** match === "regex" のときに使うパターン（未使用なら省略） */
  pattern?: RegExp;
  /** 子ノード（グループやサブメニュー） */
  children?: MenuNode[];
};

/** ツリー全体 */
export type MenuTree = MenuNode[];

/**
 * 最小のメニュー定義
 * - ダッシュボード（/dashboard）
 * - 設定（/settings）配下に「ユーザ管理（/users）」グループ
 *   - 一覧（/users）… exact
 *   - 新規（/users/new）… exact
 *
 * 動的URL（/users/[displayId]）は子に列挙しません。
 * 親（/users）が "prefix" で受け止めます。
 */
export const MENU: MenuTree = [
  {
    id: "dashboard",
    title: "ダッシュボード",
    href: "",
    icon: SquareTerminal,
    match: "prefix", // /dashboard 配下すべてを受け持つ
    children: [
      {
        id: "dashboard-overview",
        title: "全体進捗",
        href: "/dashboard",
        match: "exact",
      },
      {
        id: "dashboard-my-project",
        title: "Myプロジェクト",
        href: "#",
        match: "prefix",
      },
      {
        id: "dashboard-my-task",
        title: "Myタスク",
        href: "#",
        match: "prefix",
      },
    ],
  },
  {
    id: "docs",
    title: "ドキュメント",
    href: "",
    icon: BookOpen,
    match: "prefix",
    children: [
      {
        id: "docs-tutorial",
        title: "チュートリアル",
        href: "#",
        match: "prefix",
      },
      {
        id: "docs-changelog",
        title: "更新履歴",
        href: "#",
        match: "prefix",
      },
    ],
  },
  {
    id: "settings",
    title: "設定",
    href: "",
    icon: Settings2,
    match: "prefix",
    children: [
      {
        id: "settings-projects",
        title: "プロジェクト管理",
        href: "#",
        match: "prefix",
      },
      {
        id: "settings-masters",
        title: "マスタ管理",
        href: "#",
        match: "prefix",
      },
      {
        id: "settings-users",
        title: "ユーザ管理",
        href: "/users",
        match: "prefix", // /users 配下を親で受ける（動的URL対応）
        children: [
          { id: "users-list", title: "一覧", href: "/users", match: "exact" },
          {
            id: "users-new",
            title: "新規登録",
            href: "/users/new",
            match: "exact",
          },
          // /users/[displayId] は列挙しない → 親 "/users" が最長一致で勝つ
        ],
      },
    ],
  },
];

どうして“単一出所”が効くのか

サイドバーの強調表示（ハイライト）は、URLとメニュー定義の一致判定だけで決められます。
この章で用意した MENU を“真実の1か所”にしておけば、今後メニューを増減してもサイドバーだけで同期が保てます。ページファイルを触らずに済むので、運用が格段に楽になります。

プロパティ一覧（迷ったらこの表）

項目	必須	例	意味・コツ
`id`	✔︎	`"users-new"`	安定キー。`href`変更の影響を避けたいなら独立IDに
`title`	✔︎	`"新規"`	表示ラベル
`href`	✔︎	`"/users/new"`	絶対パス、末尾 `/` は付けない（`/users/` ←非推奨）
`icon`	ー	`SquareTerminal`	`lucide-react` のアイコンを指定可
`match`	ー	`"exact"`	未指定は `"prefix"` を既定にすると運用が簡単
`pattern`	ー	`/^\/topics\/\d{4}-\d{2}$/`	`match: "regex"` のときだけ使用（なるべく後回しに）
`children`	ー	`[...]`	グループ配下のサブメニュー

どの `match` を選べばいい？

目的	向いている `match`	例	補足
そのURLだけをピンポイントで強調	`exact`	`/users`・`/users/new`	子の葉に使うと分かりやすい
配下を丸ごと親で受ける	`prefix`	親 `/users` が `/users/**` を受ける	動的ルートの受け皿にも最適
複雑パターンが必要	`regex`	`/^\/topics\/\d{4}-\d{2}$/`	まずは不要。要件が出たら追加でOK

つまずきポイント（対処もセットで）

つまずき	症状	確認/対処
末尾スラッシュの揺れ	`/users` と `/users/` で判定が不安定	ルール：末尾 `/` は付けない。定義とURLを統一
`#` や `?` を考慮しすぎる	ハイライトが点いたり消えたり	パスだけを見る（`usePathname()` で十分）
子に動的URLを並べようとする	メニュー定義が膨らむ／維持が大変	子に列挙しない。親 `"prefix"` + “最長一致” に任せる
`regex` を先に使いたくなる	可読性・パフォーマンスが落ちがち	まずは `exact`/`prefix` で9割カバー可能

ここまでの“できたこと”

メニューの型と定義を1か所に集約（単一出所）
動的ルートは親 "prefix" で受ける前提を明確化
以降の章で、各メニューと現在URLを突き合わせて “最長一致で1件だけ” を選ぶ土台が整いました

次章では、この MENU を使って 現在地を決定するフック（use-active.ts） を用意します。

2. 現在地の判定フック（`use-active.ts`）

この章では、現在のURL（usePathname()）と“単一出所のメニューMENU”を突き合わせて、ハイライト対象を1つに決めるフックを作ります。返り値は「現在地ノード」「祖先ノード集合」と、UIで使いやすい小さな関数群（isActive / isAncestor / ariaCurrentFor / openByDefault）です。

まず“入出力”と“判定ルール”を表で押さえてください。

フックの入出力（使う側のイメージ）

項目	型	役割
`useActive(menu)`	`(menu: MenuTree) => ActiveState`	メニューを渡すと“現在地と祖先”を返す
`ActiveState.active`	`MenuNode \| null`	現在地ノード（なければ null）
`ActiveState.ancestors`	`Set<string>`	祖先ノードの `id` 集合（親→祖父…）
`isActive(id)`	`(id: string) => boolean`	その `id` が現在地か
`isAncestor(id)`	`(id: string) => boolean`	その `id` が現在地の祖先か
`ariaCurrentFor(id)`	`(id: string) => "page" \| undefined`	“そのリンクに `aria-current="page"` を付けるべきか”
`openByDefault(id)`	`(id: string) => boolean`	グループ（親メニュー）をデフォルト展開するか（現在地 or 祖先なら `true`）

判定ルール（“最長一致”を点数化）

`match`	一致条件	スコアの付け方	例
`"exact"`	`pathname === href`	`1000 + href.length`（最優先）	`/users/new` と `/users/new`
`"prefix"`	`pathname === href` または `pathname` が `href + "/"` から始まる	`href.length`（長いほど強い）	`/users/abc` に対して `/users`
`"regex"`	`pattern.test(pathname)`	`一致テキスト長`（必要時のみ）	`^/topics/\d{4}-\d{2}$`

“exact が勝つ。そうでなければ、より長く一致した方が勝つ。”という素朴な決め方です。
regex はまず不要です。exact / prefix だけで9割以上カバーできます。

フックの作成（`use-active.ts`）

src/lib/sidebar/use-active.tsを下記の内容にて作成します：

// src/lib/sidebar/use-active.ts
"use client";

import { useMemo, useCallback } from "react";
import { usePathname } from "next/navigation";
import type { MenuTree, MenuNode } from "./menu.schema";

/* ========== 公開インターフェース ========== */

export type ActiveState = {
  active: MenuNode | null;
  ancestors: Set<string>;
  isActive: (id: string) => boolean;
  isAncestor: (id: string) => boolean;
  ariaCurrentFor: (id: string) => "page" | undefined;
  openByDefault: (id: string) => boolean;
};

type FlatNode = {
  id: string;
  href: string;
  match: "exact" | "prefix" | RegExp; // "regex" は RegExp に正規化して持つ
  parentId: string | null;
  depth: number;
};

// "regex" 指定を実際の RegExp に正規化
function toFlatMatch(n: MenuNode): FlatNode["match"] {
  if (!n.match || n.match === "exact" || n.match === "prefix") {
    return n.match ?? "exact";
  }
  // n.match === "regex" の場合
  // パターン未指定なら絶対にマッチしないダミーを返す（. ^ はどれにも一致しない）
  return n.pattern ?? /.^/;
}

function flatten(
  tree: MenuTree,
  parentId: string | null,
  depth: number,
  out: FlatNode[],
) {
  for (const n of tree) {
    out.push({
      id: n.id,
      href: n.href,
      match: toFlatMatch(n), // ← ここで型を合わせる
      parentId,
      depth,
    });
    if (n.children?.length) flatten(n.children, n.id, depth + 1, out);
  }
}

export function useActive(menu: MenuTree) {
  const pathname = usePathname();

  // 1) フラット化
  const flat = useMemo(() => {
    const buf: FlatNode[] = [];
    flatten(menu, null, 0, buf);
    return buf;
  }, [menu]);

  // ★ 子参照に使う簡易インデックス（id -> node）
  const nodeById = useMemo(() => {
    const map = new Map<string, MenuNode>();
    const walk = (list: MenuNode[]) => {
      for (const n of list) {
        map.set(n.id, n);
        if (n.children?.length) walk(n.children);
      }
    };
    walk(menu);
    return map;
  }, [menu]);

  // 2) スコア計算
  const scoreFor = useCallback(
    /* 既存のまま */ (n: FlatNode): number => {
      const href = n.href.replace(/\/+$/, "");
      const current = pathname.replace(/\/+$/, "");
      if (n.match === "exact") {
        return current === href ? 1_000_000 + href.length : 0;
      }
      if (n.match === "prefix") {
        const pref = href === "" ? "/" : href + "/";
        return current.startsWith(pref) ? href.length : 0;
      }
      if (n.match instanceof RegExp) {
        const m = current.match(n.match);
        return m ? 500_000 + (m[0]?.length ?? 0) : 0;
      }
      return 0;
    },
    [pathname],
  );

  // 3) ベストを選ぶ
  const active = useMemo(() => {
    const scored = flat
      .map((n) => ({ ...n, score: scoreFor(n) }))
      .filter((n) => n.score > 0)
      .sort(
        (a, b) =>
          b.score - a.score ||
          b.depth - a.depth ||
          b.href.length - a.href.length,
      );
    return scored[0] ?? null;
  }, [flat, scoreFor]);

  // 3.5) ★ 代表リンク（/users の exact 子）に振り替えるための pageId を確定
  const pageId = useMemo(() => {
    if (!active) return undefined;
    const node = nodeById.get(active.id);
    if (!node) return active.id;

    // 親が prefix で、自分と同じ href を持つ exact の子がいれば、それを代表にする
    const exactChild = node.children?.find(
      (c) =>
        (c.match ?? "exact") === "exact" &&
        c.href.replace(/\/+$/, "") === node.href.replace(/\/+$/, ""),
    );
    return exactChild?.id ?? active.id;
  }, [active, nodeById]);

  // 祖先判定
  const parentById = useMemo(() => {
    const map = new Map<string, string | null>();
    for (const n of flat) map.set(n.id, n.parentId);
    return map;
  }, [flat]);

  const isActive = useCallback((id: string) => active?.id === id, [active]);
  const isAncestor = useCallback(
    (id: string) => {
      let p = active?.parentId ?? null;
      while (p) {
        if (p === id) return true;
        p = parentById.get(p) ?? null;
      }
      return false;
    },
    [active, parentById],
  );

  // ★ aria-current は代表リンク（pageId）に付与
  const ariaCurrentFor = useCallback<(id: string) => "page" | undefined>(
    (id) => (pageId && pageId === id ? "page" : undefined),
    [pageId],
  );

  const openByDefault = useCallback(
    (id: string) => isAncestor(id) || isActive(id),
    [isAncestor, isActive],
  );

  return { isActive, isAncestor, ariaCurrentFor, openByDefault };
}

使い方の“型合わせ”とコツ

NavMain 側では、useActive(MENU) を呼び、
aria-current とハイライト用クラス（例：data-active="true"）を “たった1つのリンク” にだけ付けます。
親のグループ（Collapsible）には openByDefault(id) を使うと、現在地の祖先は自動で展開されます。
prefix の“境界”が大事。/users と /users/new は前方一致ですが、/user（単数）とは一致しません。
下表のように 「href + "/" から始まるか？」 を見ているため、誤爆を防げます。

`href`	`pathname`	一致？	理由
`/users`	`/users`	◯	完全一致
`/users`	`/users/new`	◯	`href + "/"` から始まる
`/users`	`/user`	×	セグメント境界が違う
`/`	`/anything`	◯（弱）	ルートは最弱スコア（常に負けやすい）

“ tie のときは長い方が勝つ ” ので、/users/new は /users より強くなります。
exact はさらに +1000 のボーナスがあるため、同じ長さなら必ず exact が勝ちます。

ありがちエラーと直し方（早見表）

症状	主因	直し方
ハイライトが2か所に付く	UI側で `isActive` 条件が重複	“代表リンク1つにだけ `aria-current="page"` を付ける”ルールを徹底
`/users/`（末尾 `/`）で反応が違う	末尾スラッシュの揺れ	`normalizePath()` を必ず通す（定義側も末尾 `/` を付けない）
`/user` でも「ユーザ管理」が光る	素朴な `startsWith` 判定	セグメント境界を見て `href + "/"` で判定する実装に修正
`regex` が効かない	`pattern` 未指定	`match: "regex"` のときは `pattern` を必ず与える（不要なら `regex` は使わない）

ここまでの到達点

MENU（単一出所）と現在URLから、“最長一致でただ1つ” の現在地を計算できるようになりました。
UI は isActive / isAncestor / ariaCurrentFor / openByDefault を使うだけ。
次章では、このフックを NavMain に組み込み、aria-current="page" と親の自動展開を反映させます。

3. リンクの軽量ラッパー（`nav-link.tsx`）

<Link> をそのまま使うと、ページごとに「aria-current の付け方」「太字クラスの当て方」「target="_blank" の安全対策」などを毎回書くことになり、ムラが出がちです。
ここでは “軽量ラッパー” を1つ用意し、判定は前章の useActive()、表現は本ラッパーという役割分担にします。

役割の切り分け

レイヤー	何をする	何をしない
`useActive()`	現在地/祖先の判定、`ariaCurrentFor(id)` の提供	見た目のクラスは決めない
`NavLink`（本章）	`aria-current="page"` の受け取り→リンクへ付与。`data-active="true"` を出力。外部リンクなら `rel` を自動補完	どのリンクが現在地かを決めない
`NavMain`	`useActive()` から `active`/`ariaCurrent` を取得して `NavLink` に渡す。`SidebarMenuButton` のクラスに `data-[active=true]:…` を書く	URL判定ロジックは持たない

軽量ラッパーの作成（nav-link.tsx）

src/components/sidebar/nav-link.tsxを下記内容にて作成します：

tsx

/* src/components/sidebar/nav-link.tsx
   - Next.js の <Link> を“軽量に”包む
   - 受け取った active / ariaCurrent を素直に反映
   - 外部リンクや target="_blank" の安全対策もここで吸収
*/
"use client";

import * as React from "react";
import Link, { type LinkProps } from "next/link";

type AriaCurrent = "page" | undefined;

/** 使う側（NavMain）からは “結果” を渡してもらうだけ */
export type NavLinkProps = LinkProps &
  Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "href"> & {
    /** そのリンクが現在地なら true（useActive() 由来） */
    active?: boolean;
    /** そのリンクに付与すべき aria-current（通常は "page" か undefined） */
    ariaCurrent?: AriaCurrent;
  };

// かんたんなクラス結合
function cx(...v: Array<string | undefined>) {
  return v.filter(Boolean).join(" ");
}

/** “軽量ラッパー”本体：見た目ロジックは持たず、渡された結果を素直に出す */
export const NavLink = React.forwardRef<HTMLAnchorElement, NavLinkProps>(
  function NavLink(
    { active, ariaCurrent, className, href, target, rel, ...rest },
    ref,
  ) {
    // target="_blank" の安全対策（親から rel が来ていなければ付与）
    const safeRel =
      target === "_blank" ? (rel ? rel : "noopener noreferrer") : rel;

    return (
      <Link
        ref={ref}
        href={href}
        aria-current={ariaCurrent}
        data-active={active ? "true" : undefined}
        target={target}
        rel={safeRel}
        className={cx(
          // 基本形（SidebarMenuButton/SubButton の asChild でも単体でも崩れない）
          "flex w-full items-center gap-2 rounded-md px-2 py-1.5 transition-colors",
          // data-active でも aria-current でも強調が効くように両方用意
          "data-[active=true]:bg-muted data-[active=true]:font-semibold",
          "aria-[current=page]:bg-muted aria-[current=page]:font-semibold",
          className, // ← 親（asChild）から渡ってくるクラスを必ず後ろでマージ
        )}
        {...rest}
      />
    );
  },
);

export default NavLink;

ここがポイント

見た目の規約を1か所に統一
太字・ハイライトは data-[active=true] と aria-[current=page] の両対応にしてあるので、親側の書き方が多少違っても強調が揃います。
安全な外部リンク
target="_blank" の場合は rel="noopener noreferrer" を自動補完。記事外でも安心して使い回せます。

次章では、この NavLink を使って nav-main.tsx を実装し、
useActive() の結果 → NavLink の属性 → サイドバーの開閉/強調 という流れを完成させます。

4. NavMain を実装（`src/components/sidebar/nav-main.tsx`）

ここで前回までの記事で作成したsrc/components/sidebar/nav-main.tsxを入れ替えます。やることは次の3つだけです。

MENU（単一出所）を前提に、MenuTree 型の items を受け取る
useActive(items) の結果から、aria-current="page" と祖先の自動展開を反映
クリック時の操作性：折り畳み状態で親をクリックしたら展開だけ（すぐ遷移しない）

既存の UI パーツ（Collapsible / SidebarMenuButton など）はそのまま活かします。
また、**サブ階層の“親”**にも data-active を付けられるようにし、Chevron の回転は aria-expanded を参照するように揃えています。

NavMainの修正

tsx

/* 修正版 “全量”：src/components/sidebar/nav-main.tsx */
"use client";

import { ChevronRight } from "lucide-react";
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/collapsible";
import {
  SidebarGroup,
  SidebarGroupLabel,
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
  SidebarMenuSub,
  SidebarMenuSubButton,
  SidebarMenuSubItem,
  useSidebar,
} from "@/components/ui/sidebar";

import { NavLink } from "@/components/sidebar/nav-link";
import { useActive } from "@/lib/sidebar/use-active";
import type { MenuTree, MenuNode } from "@/lib/sidebar/menu.schema";

type Props = { items: MenuTree };

export function NavMain({ items }: Props) {
  const { isActive, isAncestor, ariaCurrentFor, openByDefault } =
    useActive(items);
  const { state, isMobile, setOpen } = useSidebar();

  // サイドバーが“collapsed（アイコンのみ）”のときは、親クリックでまずサイドバーを展開
  const handleTopParentClick = (e: React.MouseEvent) => {
    if (state === "collapsed" && !isMobile) {
      setOpen(true);
      e.preventDefault();
    }
  };

  // ─────────────────────────────────────────────
  // レベル0（トップ階層）を描画
  // ─────────────────────────────────────────────
  return (
    <SidebarGroup>
      <SidebarGroupLabel>メニュー</SidebarGroupLabel>
      <SidebarMenu>
        {items.map((node) => (
          <TopNode
            key={node.id}
            node={node}
            isActive={isActive}
            isAncestor={isAncestor}
            ariaCurrentFor={ariaCurrentFor}
            openByDefault={openByDefault}
            onTopParentClick={handleTopParentClick}
          />
        ))}
      </SidebarMenu>
    </SidebarGroup>
  );
}

/* ========== トップ階層用：親は SidebarMenuItem、子は SidebarMenuSub で受ける ========== */
function TopNode({
  node,
  isActive,
  isAncestor,
  ariaCurrentFor,
  openByDefault,
  onTopParentClick,
}: {
  node: MenuNode;
  isActive: (id: string) => boolean;
  isAncestor: (id: string) => boolean;
  ariaCurrentFor: (id: string) => "page" | undefined;
  openByDefault: (id: string) => boolean;
  onTopParentClick: (e: React.MouseEvent) => void;
}) {
  const hasChildren = !!node.children?.length;

  // 子なし（トップの葉） → そのままリンク
  if (!hasChildren) {
    return (
      <SidebarMenuItem>
        <SidebarMenuButton
          asChild
          tooltip={node.title}
          className="data-[active=true]:bg-muted data-[active=true]:font-semibold"
        >
          <NavLink
            href={node.href}
            active={isActive(node.id)}
            ariaCurrent={ariaCurrentFor(node.id)}
          >
            {node.icon && <node.icon className="size-4" />}
            <span>{node.title}</span>
          </NavLink>
        </SidebarMenuButton>
      </SidebarMenuItem>
    );
  }

  // 子あり（トップの親） → Collapsible。親は“開閉のみ”
  return (
    <Collapsible
      asChild
      defaultOpen={openByDefault(node.id)}
      className="group/collapsible"
    >
      <SidebarMenuItem>
        <CollapsibleTrigger asChild>
          <SidebarMenuButton
            tooltip={node.title}
            onClick={onTopParentClick}
            data-active={
              isActive(node.id) || isAncestor(node.id) ? "true" : undefined
            }
            className="data-[active=true]:bg-muted data-[active=true]:font-semibold"
          >
            {node.icon && <node.icon className="size-4" />}
            <span>{node.title}</span>
            <ChevronRight className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
          </SidebarMenuButton>
        </CollapsibleTrigger>

        <CollapsibleContent>
          <SidebarMenuSub>
            {node.children?.map((child) => (
              <SubNode
                key={child.id}
                node={child}
                isActive={isActive}
                isAncestor={isAncestor}
                ariaCurrentFor={ariaCurrentFor}
                openByDefault={openByDefault}
              />
            ))}
          </SidebarMenuSub>
        </CollapsibleContent>
      </SidebarMenuItem>
    </Collapsible>
  );
}

/* ========== サブ階層用：子を持つなら“さらに”Collapsible、持たなければリンク ========== */
function SubNode({
  node,
  isActive,
  ariaCurrentFor,
  openByDefault,
}: {
  node: MenuNode;
  isActive: (id: string) => boolean;
  isAncestor: (id: string) => boolean;
  ariaCurrentFor: (id: string) => "page" | undefined;
  openByDefault: (id: string) => boolean;
}) {
  const hasChildren = !!node.children?.length;

  // 子なし（葉） → リンク
  if (!hasChildren) {
    return (
      <SidebarMenuSubItem>
        <SidebarMenuSubButton
          asChild
          className="data-[active=true]:bg-muted data-[active=true]:font-semibold"
        >
          <NavLink
            href={node.href}
            active={isActive(node.id)}
            ariaCurrent={ariaCurrentFor(node.id)}
          >
            <span>{node.title}</span>
          </NavLink>
        </SidebarMenuSubButton>
      </SidebarMenuSubItem>
    );
  }

  // 子あり（サブ階層の親） → サブ内 Collapsible。親は開閉のみ（リンクにしない）
  return (
    <SidebarMenuSubItem>
      <Collapsible defaultOpen={openByDefault(node.id)}>
        <CollapsibleTrigger asChild>
          <SidebarMenuSubButton
            asChild
            className="data-[active=true]:bg-muted data-[active=true]:font-semibold"
          >
            {/* ← 最終的なトリガー要素は <button> */}
            <button
              type="button"
              data-active={openByDefault(node.id) ? "true" : undefined}
              className="group flex w-full items-center justify-between"
            >
              <span>{node.title}</span>
              {/* ← トリガーの aria-expanded を見て回転 */}
              <ChevronRight className="ml-1 size-4 transition-transform duration-200 group-aria-[expanded=true]:rotate-90" />
            </button>
          </SidebarMenuSubButton>
        </CollapsibleTrigger>

        <CollapsibleContent>
          <SidebarMenuSub className="ml-2">
            {node.children?.map((gchild) => (
              <SidebarMenuSubItem key={gchild.id}>
                <SidebarMenuSubButton
                  asChild
                  className="data-[active=true]:bg-muted data-[active=true]:font-semibold"
                >
                  <NavLink
                    href={gchild.href}
                    active={isActive(gchild.id)}
                    ariaCurrent={ariaCurrentFor(gchild.id)}
                  >
                    <span>{gchild.title}</span>
                  </NavLink>
                </SidebarMenuSubButton>
              </SidebarMenuSubItem>
            ))}
          </SidebarMenuSub>
        </CollapsibleContent>
      </Collapsible>
    </SidebarMenuSubItem>
  );
}

置き換えのコツ（最短チェック）

箇所	期待する状態	確認ポイント
型	`type Props = { items: MenuTree }`	旧 `NavItem` 参照が残っていない
判定	`useActive(items)` を呼ぶ	`isActive / ariaCurrentFor / openByDefault` を使用
Link	すべて `<NavLink>`	`SidebarMenu(Button/SubButton)` に `data-[active=true]:…` を記述
折り畳み時の挙動	親クリックでまず展開	`handleTopParentClick` で `e.preventDefault()` が効いている
サブ親の強調	サブ親にも `data-active`	「ユーザ管理」など開閉専用の親も太字に

動作確認の目安

/users → 「設定」「ユーザ管理」「一覧」が順に強調。aria-current="page" は「一覧」のみ
/users/new → 「設定」「ユーザ管理」「新規登録」
/users/U00000001 → 子に exact が無いので「ユーザ管理」が強調（最長一致）。さらに「一覧」を代表リンクとして aria-current="page" を付与したい場合は、useActive の拡張（表示側ルール）で「詳細は一覧の代表扱い」を選ぶ設計も可能
サイドバーをアイコンのみ（collapsed）にして親をクリック → まず展開、その後子を選べる

ここまでで、「判定は1か所（useActive）・表現は統一（NavLink）・親は開閉のみ」が揃いました。次章で app-sidebar.tsx に MENU を渡して締めます。

5. Sidebar 組み込み（`app-sidebar.tsx`）

最後に、サイドバーへ MENU を“正式採用” します。ポイントは2つだけです。

NavMain に items={MENU} を渡す（mockNavMain は廃止）
a11y：<nav aria-label="メインメニュー"> を付ける

`app-sidebar.tsx`の修正

下記のように src/components/sidebar/app-sidebar.tsx を修正します。

tsx

// src/components/sidebar/app-sidebar.tsx
"use client";

import * as React from "react";

import { ModeToggle } from "@/components/sidebar/mode-toggle";
import { NavMain } from "@/components/sidebar/nav-main";
import { NavUser } from "@/components/sidebar/nav-user";
import { NavTeam } from "@/components/sidebar/nav-team";

import {
  Sidebar,
  SidebarContent,
  SidebarFooter,
  SidebarHeader,
  SidebarRail,
} from "@/components/ui/sidebar";

import { mockTeam } from "@/lib/sidebar/mock-team";
import { mockUser } from "@/lib/sidebar/mock-user";
// ★ 単一出所に統一：ここからメニューを取る
import { MENU } from "@/lib/sidebar/menu.schema";

export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
  return (
    <Sidebar collapsible="icon" {...props}>
      <SidebarHeader>
        <NavTeam team={mockTeam} />
      </SidebarHeader>

      <SidebarContent>
        {/* a11y ランドマーク：メインメニュー */}
        <nav aria-label="メインメニュー">
          <NavMain items={MENU} />
        </nav>
      </SidebarContent>

      <SidebarFooter>
        <ModeToggle className="ml-auto" />
        <NavUser user={mockUser} />
      </SidebarFooter>

      <SidebarRail />
    </Sidebar>
  );
}

置き換え後に見るべきところ

ページ本体はSSRのまま（usePathname() はサイドバー内＝クライアントでのみ使用）
ランドマーク <nav> によってスクリーンリーダーで「ここがメインメニュー」と把握できる
以後、新規タブやパンくず自動生成なども**MENU から派生**させやすい

既存の NavTeam / NavUser / ModeToggle / SidebarRail などは無改造でそのまま使えます。

動作確認

ここまで来たら、一旦動作確認が可能です。

npm run devでテスト実行して、/usersにアクセスしてみてください。下図のようにメニューとページの同期がとれた状態になったことが確認できます。

アクセス先	期待する見え方
`/users`	「設定 ▸ ユーザ管理 ▸ 一覧」にハイライト（`aria-current="page"`）
`/users/new`	「設定 ▸ ユーザ管理 ▸ 新規」にハイライト
`/users/U00000001`	子に exact が無いので「ユーザ管理」だけが強調（最長一致）
サイドバー collapsed	親（例「設定」）をクリック → 展開 → 子を選んで遷移

補足：ライトモードでアクティブなメニューが少しわかりづらい点
これは好みになりますが、Shadcn/uiのデフォルトのCSSだと、ライトモードのときに、アクティブなメニューが判別づらいと感じました。
こうしたときはsrc/app/globals.cssのroot:ブロックを調整します。--muted: oklch(0.97 0 0);がアクティブ時のCSSとして利用されています。
私はこれを--muted: oklch(0.95 0 0);にして、少し判別しやすく調整しました。

これで、ページ本体は SSR のまま・サイドバーだけで現在地同期が完了です。以降、メニュー追加・順序変更は menu.schema.ts のみを編集すれば、強調・展開・aria-current が自動で追随します。

6. a11y チェック

“どのページにいるか”を目と耳の両方に伝えるのが a11y。ここでは、本稿の実装で押さえるべきポイントを 最小限のコード＋確認表 にまとめます。すでに実装済み（NavLink / NavMain / app-sidebar）なので、最後にセルフチェックするだけで OK です。

ランドマーク：サイドバーを `<nav>` で囲う

スクリーンリーダーに「ここがメインメニュー」と伝えるため、NavMain を <nav aria-label="メインメニュー"> で包みます（実装済み）。

▼該当箇所：

tsx

// src/components/sidebar/app-sidebar.tsx（抜粋）
<SidebarContent>
  <nav aria-label="メインメニュー">
    <NavMain items={MENU} />
  </nav>
</SidebarContent>

補足：aria-label は “メニュー” の意味が分かる短い日本語であれば OK です。

「いまのページ」を 1 件だけ：`aria-current="page"`

リンクの代表 1 件だけに aria-current="page" を付けます。判定は useActive()、付与は NavLink が担当（実装済み）。

▼該当箇所：

tsx

// src/components/sidebar/nav-link.tsx（抜粋）
<Link
  href={href}
  aria-current={ariaCurrent}      // ← "page" か undefined をそのまま渡す
  data-active={active ? "true" : undefined}
/>

ポイント：aria-current を付けるのは 本当に “そのページを代表するリンク” だけ。親の開閉ボタンには付けません。

開閉 UI：ボタンは `aria-expanded` が付く（Radix/shadcn が自動付与）

親メニューは リンクではなくボタン。CollapsibleTrigger を使うと、開閉に応じて aria-expanded が自動で更新されます（手動で付ける必要はありません）。

▼該当箇所：

tsx

// src/components/sidebar/nav-main.tsx（抜粋）
<Collapsible>
  <CollapsibleTrigger asChild>
    <SidebarMenuButton
      // 開いているときは aria-expanded="true"（Radix が管理）
      // “親は開閉のみ、遷移しない” のがポイント
    >
      <span>{node.title}</span>
    </SidebarMenuButton>
  </CollapsibleTrigger>
  <CollapsibleContent>…</CollapsibleContent>
</Collapsible>

補足：親に URL を持たせて遷移させると “開閉 vs 遷移” が競合して混乱しがち。親は開閉だけにしておくのが安全です。

色だけに頼らない強調（視覚的な配慮）

NavLink は aria-current と data-active の両方で強調クラスを当てています。太字（font-weight）や背景色を併用することで、色覚に依存しない差異を作れます（実装済み）。

tsx

// src/components/sidebar/nav-link.tsx（抜粋）
className={cx(
  "flex w-full items-center gap-2 rounded-md px-2 py-1.5 transition-colors",
  "data-[active=true]:bg-muted data-[active=true]:font-semibold",
  "aria-[current=page]:bg-muted aria-[current=page]:font-semibold",
)}

TIPS：font-semibold（太字）を併用しておくと、モノクロ環境でも “現在地” が判別しやすくなります。

キーボード操作の目安

操作	期待される挙動
`Tab / Shift + Tab`	フォーカスがメニュー内のボタン/リンク間を順に移動
`Enter` or `Space`（親）	親メニューの開閉（`aria-expanded` が更新）
`Enter`（子リンク）	該当ページへ遷移
`Esc`（ツールチップ等が出ていれば）	クローズ

補足：shadcn/ui（Radix）コンポーネントは上記の基本操作をカバー済みです。独自のキーバインドを追加する必要はありません。

セルフチェック（すぐ終わるテスト）

見るところ	どうなっていれば OK？	確認方法
ランドマーク	`<nav aria-label="メインメニュー">` がある	DevTools Elements で確認
現在地リンク	`aria-current="page"` が 1 件だけ付く	`/users` と `/users/new` をそれぞれ開く
親の開閉	折り畳み時に `aria-expanded` が `false → true` に変わる	親のボタンを Enter/クリック
視覚強調	現在地リンクが太字＋背景色で強調される	目視／強調クラスの有無を確認
誤判定防止	`/user` では「ユーザ管理」が光らない	パス境界の判定（`/users` と区別）を確認

ランドマーク（nav）＋ aria-current（代表 1 件）＋ aria-expanded（親の開閉） の三点セットだけで、今回のサイドバーは a11y 的に必要十分。
以降は MENU 定義を編集するだけで、強調・展開・aria-current が自動で追随します。

7.補足：`layout.tsx`と`page.tsx`

前回までの記事で、src/app/(protected)/layout.tsxとsrc/app/(protected)/配下の各ページについて、下記のようにしていました。

tsx : layout.tsx

// src/app/(protected)/layout.tsx（抜粋）
・・・省略・・・
  return (
    <SidebarProvider>
        {/* サイドバー/ヘッダ/パンくずは“各 page.tsx”で自由に */}
        {children}
        <Toaster richColors closeButton />
    </SidebarProvider>
  );
・・・省略・・・

tsx : pages.tsx

// src/app/(protected)/dashboard/page.tsx（抜粋）
・・・省略・・・
  return (
    <>
      <AppSidebar />
      <SidebarInset>
      ・・・省略・・・
      </SidebarInset>
    </>
  );
・・・省略・・・

これは当初<AppSidebar />に引数を渡すような仕様を想定していたためでした。しかし、今回、URLのパスからアクティブなメニューを判定する仕様にしました。これによって、page.tsx側で<AppSidebar />を持つ必要がなくなりました。

したがって、下記のように変更しました。

tsx : layout.tsx

// src/app/(protected)/layout.tsx（抜粋）
・・・省略・・・
  return (
    <SidebarProvider>
      <AppSidebar />
      <SidebarInset className="min-w-0">
        {/* サイドバー/ヘッダ/パンくずは“各 page.tsx”で自由に */}
        {children}
        <Toaster richColors closeButton />
      </SidebarInset>
    </SidebarProvider>
  );
・・・省略・・・

tsx : pages.tsx

// src/app/(protected)/dashboard/page.tsx（抜粋）各ページ同様
・・・省略・・・
  return (
    <>
      <header className="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12">
      ・・・省略・・・
      </header>
      <div className="flex flex-1 flex-col gap-4 p-4 pt-0">
      ・・・省略・・・
      </div>
    </>
  );
・・・省略・・・

<AppSidebar />と <SidebarInset>をlayout.tsx側に移動させました。<SidebarInset>についてはデータテーブルの横幅に影響がでないように<SidebarInset className="min-w-0">を共通のものとしています。これで、page.tsxは本当に必要な内容だけを記述すればよくなりました。

8. まとめと次回予告

ここまでで「サイドバーのメニューと参照中ページの同期」を実装しました。ページ本体（SSR）は無改造のまま、サイドバー（Client）だけで現在地を判定・表示します。

今日やったこと（要点だけ一望）

テーマ	中身	得られた効果
単一出所のメニュー	`MENU: MenuTree` を `src/lib/sidebar/menu.schema.ts` に集約	追加・順序変更が1ファイルで完結
現在地の判定	`useActive(menu)`：`usePathname()` × 最長一致（exact>prefix>regex）	ハイライトが常に1か所に定まる
軽量ラッパー	`NavLink`：`aria-current="page"` と `data-active` を受けて出すだけ	a11yと見た目の規約を再利用
本体実装	`NavMain`：親は開閉ボタン、子はリンク／Chevron回転は `aria-expanded`	操作性（折り畳み時の誤遷移防止）と一貫表現
組み込み	`app-sidebar.tsx` に `items={MENU}`／`<nav aria-label="メインメニュー">`	ランドマークと現在地が揃って伝わる

以後は menu.schema.ts を編集するだけで、強調・展開・aria-current が自動追随します。

次回予告：プロフィール系の2画面を作る

サイドバー下部のユーザメニューから遷移する 「ユーザー情報確認」 と 「パスワード変更」 を追加する予定です。

参考文献

本稿で扱った「現在地の判定」「サイドバーの開閉」「a11y属性（aria-current/aria-expanded）」の根拠や、実装に使った主要ライブラリの一次情報です。

Next.js

Next.js App Router – Navigation（usePathname）
- https://nextjs.org/docs/app/building-your-application/routing/linking-and-navigating
Next.js App Router – Routing / Dynamic Routes
- https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes
Metadata（metadata の使い方）
- https://nextjs.org/docs/app/building-your-application/optimizing/metadata

shadcn/ui / Radix UI

shadcn/ui – Components（Sidebar, Breadcrumb, Button などの実装リファレンス）
- https://ui.shadcn.com/docs/components
shadcn/ui – Collapsible（Radix の Collapsible を用いた開閉UI）
- https://ui.shadcn.com/docs/components/collapsible
Radix UI – Collapsible（data-state="open/closed"・トリガーの仕様）
- https://www.radix-ui.com/primitives/docs/components/collapsible
sonner（<Toaster /> の通知）
- https://sonner.emilkowal.ski/

アクセシビリティ（WAI-ARIA / MDN）

Navigation ランドマーク（<nav aria-label="…"> の考え方）
- https://www.w3.org/WAI/ARIA/apg/practices/landmark-regions/
Disclosure / Accordion パターン（開閉UIの a11y 付与）
- https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/
aria-current 属性（現在地リンクの表明）
- https://developer.mozilla.org/ja/docs/Web/Accessibility/ARIA/Attributes/aria-current
aria-expanded 属性（開閉状態の表明）
- https://developer.mozilla.org/ja/docs/Web/Accessibility/ARIA/Attributes/aria-expanded

Tailwind CSS

Tailwind v4 – Data / ARIA Variants（data-[active=true] や aria-[expanded=true]）
- https://tailwindcss.com/docs/hover-focus-and-other-states#data-attributes
Tailwind – Typography / Utility クラス（強調やレイアウトの基本）
- https://tailwindcss.com/docs/utility-first

React / TypeScript（補助）

React – forwardRef（NavLink の薄いラッパー実装で使用）
- https://react.dev/reference/react/forwardRef
TypeScript – 型の絞り込み（RegExp と union 型の扱い）
- https://www.typescriptlang.org/docs/handbook/2/narrowing.html

Githubリポジトリ

この記事で作成した内容は下記のGithubリポジトリにアップしています。ご参考にどうぞ。

https://github.com/delogs-jp/sidebar-active-sync

この記事の執筆・編集担当

松本孝太郎

DELOGs編集部/中年新米プログラマー

ここ数年はReact&MUIのフロントエンドエンジニアって感じでしたが、Next.jsを学んで少しずつできることが広がりつつあります。その実践記録をできるだけ共有していければと思っています。

管理画面に「プロフィール」ページを追加し、ユーザ自身が情報やパスワードを更新できるUIを作成

2025/8/22公開

[管理画面フォーマット制作編 #3] Shadcn/uiで作るユーザ管理UI ─ 詳細・新規・編集フォーム実装

管理者向けのユーザ詳細表示・新規登録・編集画面をShadcn/uiとReact Hook Form、Zodを組み合わせて実装

2025/8/16公開

[管理画面フォーマット制作編 #3] Shadcn/uiで作るユーザ管理UI ─ 詳細・新規・編集フォーム実装のイメージ

[管理画面フォーマット制作編 #2] Shadcn/uiで作るログイン後の管理画面レイアウト

Shadcn/uiで簡単に管理画面UIを構築。共通ヘッダ、サイドメニューなどの基本レイアウトを作成

2025/8/8公開

[管理画面フォーマット制作編 #2] Shadcn/uiで作るログイン後の管理画面レイアウトのイメージ

[管理画面フォーマット制作編 #1] Shadcn/uiで作るログイン画面

Shadcn/uiを利用してログインを画面作成。UIのほかZodによるバリデーションなどを実践

2025/7/24公開

[管理画面フォーマット制作編 #1] Shadcn/uiで作るログイン画面のイメージ

Next.js+shadcn/uiのインストールと基本動作のまとめ

開発環境（ローカルPC）にNext.js 15とshadcn/uiをインストールして、基本の動作を確認

2025/6/20公開

管理画面フォーマット制作編 #4サイドバーのメニューと参照中ページの同期

0. はじめに

何を解決するか（要点を一望）

前提（ここだけ目を通せばOK）

この先で触るファイル（最小セット）

a11y（アクセシビリティ）はここだけ押さえる

技術スタック

1. メニュー定義を“単一出所”に（menu.schema.ts）

どうして“単一出所”が効くのか

プロパティ一覧（迷ったらこの表）

どの match を選べばいい？

つまずきポイント（対処もセットで）

ここまでの“できたこと”

2. 現在地の判定フック（use-active.ts）

フックの入出力（使う側のイメージ）

判定ルール（“最長一致”を点数化）

フックの作成（use-active.ts）

使い方の“型合わせ”とコツ

ありがちエラーと直し方（早見表）

ここまでの到達点

3. リンクの軽量ラッパー（nav-link.tsx）

役割の切り分け

軽量ラッパーの作成 （nav-link.tsx）

ここがポイント

4. NavMain を実装（src/components/sidebar/nav-main.tsx）

NavMainの修正

置き換えのコツ（最短チェック）

動作確認の目安

5. Sidebar 組み込み（app-sidebar.tsx）

app-sidebar.tsxの修正

置き換え後に見るべきところ

動作確認

6. a11y チェック

ランドマーク：サイドバーを <nav> で囲う

「いまのページ」を 1 件だけ：aria-current="page"

開閉 UI：ボタンは aria-expanded が付く（Radix/shadcn が自動付与）

色だけに頼らない強調（視覚的な配慮）

キーボード操作の目安

セルフチェック（すぐ終わるテスト）

7.補足：layout.tsxとpage.tsx

8. まとめと次回予告

今日やったこと（要点だけ一望）

次回予告：プロフィール系の2画面を作る

参考文献

Next.js

shadcn/ui / Radix UI

アクセシビリティ（WAI-ARIA / MDN）

Tailwind CSS

React / TypeScript（補助）

Githubリポジトリ

管理画面フォーマット制作編 #4
サイドバーのメニューと参照中ページの同期

1. メニュー定義を“単一出所”に（`menu.schema.ts`）

どの `match` を選べばいい？

2. 現在地の判定フック（`use-active.ts`）

フックの作成（`use-active.ts`）

3. リンクの軽量ラッパー（`nav-link.tsx`）

軽量ラッパーの作成（nav-link.tsx）

4. NavMain を実装（`src/components/sidebar/nav-main.tsx`）

5. Sidebar 組み込み（`app-sidebar.tsx`）

`app-sidebar.tsx`の修正

ランドマーク：サイドバーを `<nav>` で囲う

「いまのページ」を 1 件だけ：`aria-current="page"`

開閉 UI：ボタンは `aria-expanded` が付く（Radix/shadcn が自動付与）

7.補足：`layout.tsx`と`page.tsx`