ダッシュボードのナビゲーションとローディング表示を追加

app/musics/loading.tsx

@@ -0,0 +1,5 @@
+import MusicListLoading from "@/components/music-list-loading";
+
+export default function Loading() {
+	return <MusicListLoading />;
+}

components/dashboard-home.tsx

@@ -1,36 +1,22 @@
-"use client";
-
-import AppLayout from "@cloudscape-design/components/app-layout";
 import Button from "@cloudscape-design/components/button";
 import Container from "@cloudscape-design/components/container";
 import ContentLayout from "@cloudscape-design/components/content-layout";
 import Header from "@cloudscape-design/components/header";
 import SpaceBetween from "@cloudscape-design/components/space-between";
-import TopNavigation from "@cloudscape-design/components/top-navigation";
+
+import DashboardLayout from "@/components/dashboard-layout";
 
 export default function DashboardHome({ userName }: { userName: string }) {
 	return (
-		<div className="min-h-screen min-w-80">
-			<TopNavigation
-				id="dashboard-header"
-				identity={{ href: "/", title: "XLAIR Dashboard" }}
-			/>
-			<AppLayout
-				headerSelector="#dashboard-header"
-				// Remove toolsHide when an AppLayout tools panel is introduced.
-				toolsHide
-				content={
-					<ContentLayout header={<Header variant="h1">XLAIR Dashboard</Header>}>
-						<Container>
-							<SpaceBetween size="m">
-								<div>管理者用ダッシュボードへようこそ、{userName} さん。</div>
-								<Button href="/musics">楽曲管理</Button>
-								<Button href="/auth/logout">ログアウト</Button>
-							</SpaceBetween>
-						</Container>
-					</ContentLayout>
-				}
-			/>
-		</div>
+		<DashboardLayout activeHref="/">
+			<ContentLayout header={<Header variant="h1">XLAIR Dashboard</Header>}>
+				<Container>
+					<SpaceBetween size="m">
+						<div>管理者用ダッシュボードへようこそ、{userName} さん。</div>
+						<Button href="/auth/logout">ログアウト</Button>
+					</SpaceBetween>
+				</Container>
+			</ContentLayout>
+		</DashboardLayout>
 	);
 }

components/dashboard-layout.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import AppLayout from "@cloudscape-design/components/app-layout";
+import SideNavigation from "@cloudscape-design/components/side-navigation";
+import TopNavigation from "@cloudscape-design/components/top-navigation";
+import type { ReactNode } from "react";
+
+const navigationItems = [
+	{ type: "link" as const, text: "ホーム", href: "/" },
+	{ type: "link" as const, text: "楽曲管理", href: "/musics" },
+];
+
+export default function DashboardLayout({
+	activeHref,
+	children,
+}: {
+	activeHref: string;
+	children: ReactNode;
+}) {
+	return (
+		<div className="min-h-screen min-w-80">
+			<TopNavigation
+				id="dashboard-header"
+				identity={{ href: "/", title: "XLAIR Dashboard" }}
+			/>
+			<AppLayout
+				headerSelector="#dashboard-header"
+				navigation={
+					<SideNavigation
+						activeHref={activeHref}
+						header={{ href: "/", text: "XLAIR Dashboard" }}
+						items={navigationItems}
+					/>
+				}
+				// Remove toolsHide when an AppLayout tools panel is introduced.
+				toolsHide
+				content={children}
+			/>
+		</div>
+	);
+}

components/music-list-loading.tsx

@@ -0,0 +1,25 @@
+import Container from "@cloudscape-design/components/container";
+import ContentLayout from "@cloudscape-design/components/content-layout";
+import Header from "@cloudscape-design/components/header";
+import Spinner from "@cloudscape-design/components/spinner";
+
+import DashboardLayout from "@/components/dashboard-layout";
+
+export default function MusicListLoading() {
+	return (
+		<DashboardLayout activeHref="/musics">
+			<ContentLayout header={<Header variant="h1">楽曲管理</Header>}>
+				<Container>
+					<div
+						aria-label="楽曲一覧を読み込み中"
+						className="flex min-h-48 items-center justify-center"
+						role="status"
+					>
+						<Spinner size="large" />
+						<span className="sr-only">楽曲一覧を読み込み中</span>
+					</div>
+				</Container>
+			</ContentLayout>
+		</DashboardLayout>
+	);
+}

components/music-list.tsx

@@ -1,14 +1,13 @@
 "use client";
 
-import AppLayout from "@cloudscape-design/components/app-layout";
 import Button from "@cloudscape-design/components/button";
 import Container from "@cloudscape-design/components/container";
 import ContentLayout from "@cloudscape-design/components/content-layout";
 import Header from "@cloudscape-design/components/header";
 import SpaceBetween from "@cloudscape-design/components/space-between";
-import TopNavigation from "@cloudscape-design/components/top-navigation";
 import dynamic from "next/dynamic";
 
+import DashboardLayout from "@/components/dashboard-layout";
 import type { MusicListResponse } from "@/lib/api";
 
 const MusicTable = dynamic(() => import("@/components/music-table"), {
@@ -30,36 +29,19 @@ export default function MusicList({
 		: undefined;
 
 	return (
-		<div className="min-h-screen min-w-80">
-			<TopNavigation
-				id="dashboard-header"
-				identity={{ href: "/", title: "XLAIR Dashboard" }}
-			/>
-			<AppLayout
-				headerSelector="#dashboard-header"
-				// Remove toolsHide when an AppLayout tools panel is introduced.
-				toolsHide
-				content={
-					<ContentLayout
-						header={
-							<Header actions={<Button href="/">ホーム</Button>} variant="h1">
-								楽曲管理
-							</Header>
-						}
-					>
-						<Container>
-							<SpaceBetween size="m">
-								<MusicTable data={data} />
-								<div className="flex justify-end">
-									<Button disabled={!nextPageHref} href={nextPageHref}>
-										次へ
-									</Button>
-								</div>
-							</SpaceBetween>
-						</Container>
-					</ContentLayout>
-				}
-			/>
-		</div>
+		<DashboardLayout activeHref="/musics">
+			<ContentLayout header={<Header variant="h1">楽曲管理</Header>}>
+				<Container>
+					<SpaceBetween size="m">
+						<MusicTable data={data} />
+						{nextPageHref ? (
+							<div className="flex justify-end">
+								<Button href={nextPageHref}>次へ</Button>
+							</div>
+						) : null}
+					</SpaceBetween>
+				</Container>
+			</ContentLayout>
+		</DashboardLayout>
 	);
 }