navbar, sidebar, markdownの読み込み

na-trium-144 · na-trium-144 · commit 3ad9653f339d · 2025-08-01T03:48:39.000+09:00
diff --git a/app/[docs_id]/page.tsx b/app/[docs_id]/page.tsx
@@ -0,0 +1,43 @@
+import { notFound } from "next/navigation";
+import { readFile } from "node:fs/promises";
+import { join } from "node:path";
+import Markdown, { Components } from "react-markdown";
+
+export default async function Page({
+  params,
+}: {
+  params: Promise<{ docs_id: string }>;
+}) {
+  const { docs_id } = await params;
+
+  let mdContent: string;
+  try {
+    mdContent = await readFile(
+      join(process.cwd(), "docs", `${docs_id}.md`),
+      "utf-8",
+    );
+  } catch (error) {
+    console.error(error);
+    notFound();
+  }
+
+  return (
+    <div className="p-4">
+      <Markdown components={components}>{mdContent}</Markdown>
+    </div>
+  );
+}
+
+// TailwindCSSがh1などのタグのスタイルを消してしまうので、手動でスタイルを指定する必要がある
+const components: Components = {
+  h1: ({ node, ...props }) => (
+    <h1 className="text-2xl font-bold my-4" {...props} />
+  ),
+  h2: ({ node, ...props }) => (
+    <h2 className="text-xl font-semibold my-3" {...props} />
+  ),
+  h3: ({ node, ...props }) => (
+    <h3 className="text-lg font-medium my-2" {...props} />
+  ),
+  p: ({ node, ...props }) => <p className="my-2" {...props} />,
+};
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,5 +1,8 @@
 import type { Metadata } from "next";
 import "./globals.css";
+import { Navbar } from "./navbar";
+import { Sidebar } from "./sidebar";
+import { ReactNode } from "react";
 
 export const metadata: Metadata = {
   title: "Create Next App",
@@ -8,12 +11,26 @@ export const metadata: Metadata = {
 
 export default function RootLayout({
   children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
+}: Readonly<{ children: ReactNode }>) {
   return (
     <html lang="ja">
-      <body>{children}</body>
+      <body className="w-screen h-screen">
+        <div className="drawer lg:drawer-open">
+          <input id="drawer-toggle" type="checkbox" className="drawer-toggle" />
+          <div className="drawer-content flex flex-col">
+            <Navbar />
+            {children}
+          </div>
+          <div className="drawer-side shadow-md">
+            <label
+              htmlFor="drawer-toggle"
+              aria-label="close sidebar"
+              className="drawer-overlay"
+            />
+            <Sidebar />
+          </div>
+        </div>
+      </body>
     </html>
   );
 }
diff --git a/app/navbar.tsx b/app/navbar.tsx
@@ -0,0 +1,32 @@
+export function Navbar() {
+  return (
+    <div className="navbar bg-base-200 w-full">
+      <div className="flex-none lg:hidden">
+        {/* サイドバーを開閉するボタン */}
+        <label
+          htmlFor="drawer-toggle"
+          aria-label="open sidebar"
+          className="btn btn-square btn-ghost"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            className="inline-block h-6 w-6 stroke-current"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="2"
+              d="M4 6h16M4 12h16M4 18h16"
+            />
+          </svg>
+        </label>
+      </div>
+      <div className="mx-2 flex-1 px-2 font-bold text-xl lg:hidden">
+        {/* タイトル(サイドバー非表示の場合のみ) */}
+        Navbar Title
+      </div>
+    </div>
+  );
+}
diff --git a/app/page.tsx b/app/page.tsx
@@ -1,3 +1,3 @@
 export default function Home() {
-  return <div className="">Hello, world</div>;
+  return <div className="p-4">This is root page</div>;
 }
diff --git a/app/sidebar.tsx b/app/sidebar.tsx
@@ -0,0 +1,18 @@
+import Link from "next/link";
+
+export function Sidebar() {
+  return (
+    <div className="bg-base-200 min-h-full w-80 p-4">
+      {/* todo: 背景色ほんとにこれでいい？ */}
+      <h2 className="hidden lg:block text-xl font-bold mb-4">
+        {/* サイドバーが常時表示されている場合のみ */}
+        Navbar Title
+      </h2>
+      <ul className="menu w-full">
+        <li>
+          <Link href="/1">1</Link>
+        </li>
+      </ul>
+    </div>
+  );
+}
diff --git a/docs/1.md b/docs/1.md
@@ -0,0 +1,3 @@
+## sample markdown file
+
+hello, world!
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,3 @@`
`1`	`1`	`export default function Home() {`
`2`		`- return <div className="">Hello, world</div>;`
	`2`	`+ return <div className="p-4">This is root page</div>;`
`3`	`3`	`}`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+## sample markdown file`
	`2`	`+`
	`3`	`+hello, world!`