Complete "Layout Routes"

src/routes/_sidebar.tsx

@@ -0,0 +1,70 @@
+import { createFileRoute, Link, Outlet } from '@tanstack/react-router';
+import { getContacts } from "@/data";
+
+async function fetchContacts() {
+  const contacts = await getContacts();
+  return { contacts };
+}
+
+export const Route = createFileRoute('/_sidebar')({
+  component: Sidebar,
+  loader: fetchContacts,
+});
+
+function Sidebar() {
+  const { contacts } = Route.useLoaderData();
+
+  return (
+    <>
+      <div id="sidebar">
+        <h1>
+          <Link to="/about">TanStack Start Contacts</Link>
+        </h1>
+        <div>
+          <form id="search-form" role="search">
+            <input
+              aria-label="Search contacts"
+              id="q"
+              name="q"
+              placeholder="Search"
+              type="search"
+            />
+            <div aria-hidden hidden={true} id="search-spinner"/>
+          </form>
+          <form method="post">
+            <button type="submit">New</button>
+          </form>
+        </div>
+        <nav>
+          {contacts.length ? (
+            <ul>
+              {contacts.map((contact) => (
+                <li key={contact.id}>
+                  <Link to="/contacts/$contractId" params={{ contractId: contact.id }}>
+                    {contact.first || contact.last ? (
+                      <>
+                        {contact.first} {contact.last}
+                      </>
+                    ) : (
+                      <i>No Name</i>
+                    )}
+                    {contact.favorite ? (
+                      <span>★</span>
+                    ) : null}
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          ) : (
+            <p>
+              <i>No contacts</i>
+            </p>
+          )}
+        </nav>
+      </div>
+      <div id={'detail'}>
+        <Outlet/>
+      </div>
+    </>
+  );
+}