feat: 目次コンポーネントを追加

Author: 3w36zj6

website/src/components/templates/BaseTemplate.tsx

@@ -1,6 +1,11 @@
 import type { FC, PropsWithChildren } from "hono/jsx";
 import type { Page } from "../../types/model";
-import { SiteNoticeBanner, Footer, Breadcrumbs } from "../ui/common/";
+import {
+  SiteNoticeBanner,
+  Footer,
+  Breadcrumbs,
+  TableOfContents,
+} from "../ui/common/";
 
 export type BaseTemplateProps = PropsWithChildren<{
   page: Page;
@@ -397,19 +402,7 @@ export const BaseTemplate: FC<BaseTemplateProps> = ({
             )}
           </main>
 
-          {outline.length > 0 && (
-            <nav id="page-overview">
-              <strong>目次</strong>
-              <ul>
-                {outline.map((item, idx) => (
-                  <li data-assoc={item.id}>
-                    <a href={`#${item.id}`}>{item.name}</a>
-                    <ul></ul>
-                  </li>
-                ))}
-              </ul>
-            </nav>
-          )}
+          <TableOfContents outline={outline} />
         </div>
 
         <Footer />

website/src/components/ui/common/TableOfContents.tsx

@@ -0,0 +1,34 @@
+import type { OutlineItem } from "../../../types/model";
+
+export type TableOfContentsProps = {
+  outline: OutlineItem[];
+};
+
+export const TableOfContents = ({ outline }: TableOfContentsProps) => {
+  if (outline.length === 0) {
+    return null;
+  }
+
+  return (
+    <nav
+      id="page-overview"
+      class="flex-none w-full md:w-60 lg:w-72 mt-6 mb-8 px-3.5 py-3 border border-neutral-200/60 rounded-md bg-white sticky top-0 h-screen overflow-auto"
+    >
+      <strong class="block mb-2 text-xs text-neutral-500 font-semibold tracking-wide">
+        目次
+      </strong>
+      <ol class="space-y-1 text-xs text-neutral-700">
+        {outline.map((item) => (
+          <li key={item.id} data-assoc={item.id}>
+            <a
+              href={`#${item.id}`}
+              class="block px-2 py-1 rounded hover:bg-neutral-100 transition-colors"
+            >
+              {item.name}
+            </a>
+          </li>
+        ))}
+      </ol>
+    </nav>
+  );
+};

website/src/components/ui/common/index.ts

@@ -1,3 +1,4 @@
 export { SiteNoticeBanner } from "./SiteNoticeBanner";
 export { Breadcrumbs, type BreadcrumbsProps } from "./Breadcrumbs";
+export { TableOfContents, type TableOfContentsProps } from "./TableOfContents";
 export { Footer } from "./Footer";