Complete "Client Side Routing"

2025-04-01 11:13:27 +02:00
parent d2ec794846
commit 90c0dd6812
3 changed files with 138 additions and 37 deletions
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -2,6 +2,8 @@ import type { Metadata } from "next";
 import React from "react";

 import "./globals.css";
+import Form from "next/form";
+import Link from "next/link";

 export const metadata: Metadata = {
  title: "Next.js Address Book",
@@ -15,9 +17,43 @@ export default function RootLayout({
 }>) {
  return (
    <html lang="en">
-      <body>
-        {children}
-      </body>
+    <body>
+    <div id="sidebar">
+      <h1>React Router Contacts</h1>
+      <div>
+        <Form id="search-form" role="search" action="." formMethod="get">
+          <input
+            aria-label="Search contacts"
+            id="q"
+            name="q"
+            placeholder="Search"
+            type="search"
+          />
+          <div
+            aria-hidden
+            hidden={true}
+            id="search-spinner"
+          />
+        </Form>
+        <Form action="." formMethod="post">
+          <button type="submit">New</button>
+        </Form>
+      </div>
+      <nav>
+        <ul>
+          <li>
+            <Link href={`/contacts/1`}>Your Name</Link>
+          </li>
+          <li>
+            <Link href={`/contacts/2`}>Your Friend</Link>
+          </li>
+        </ul>
+      </nav>
+    </div>
+    <div id={'detail'}>
+      {children}
+    </div>
+    </body>
    </html>
  );
 }