add main nav on landing + clean up

packages/docs/app/components/header-layout.tsx

@@ -1,25 +0,0 @@
-import clsx from "clsx"
-import { useScrolled } from "~/hooks/dom/use-scrolled"
-
-export function HeaderLayout({
-  header,
-  body,
-}: {
-  header: React.ReactNode
-  body: React.ReactNode
-}) {
-  const isScrolled = useScrolled()
-  return (
-    <div className="isolate">
-      <header
-        className={clsx(
-          isScrolled ? "bg-slate-700/30" : "bg-slate-800",
-          "shadow-md sticky top-0 py-3 backdrop-blur-sm transition z-10 h-16 flex",
-        )}
-      >
-        <div className="m-auto w-full max-w-screen-lg px-6">{header}</div>
-      </header>
-      <div className="m-auto max-w-screen-lg px-6 mt-8">{body}</div>
-    </div>
-  )
-}

packages/docs/app/components/main-navigation.tsx

@@ -4,9 +4,9 @@ import { Link } from "remix"
 import { ExternalLink } from "~/components/external-link"
 import { linkClass } from "~/styles"
 
-export function HeaderNav() {
+export function MainNavigation() {
   return (
-    <nav className="flex justify-between items-center">
+    <nav className="flex justify-between items-center h-16">
       <Link to="/">
         <h1 className="text-3xl font-light">reacord</h1>
       </Link>

packages/docs/app/components/side-nav.tsx

@@ -1,16 +0,0 @@
-import type { ReactNode } from "react"
-
-export function SideNav({
-  heading,
-  children,
-}: {
-  heading: ReactNode
-  children: ReactNode
-}) {
-  return (
-    <nav>
-      <h2 className="text-2xl">{heading}</h2>
-      <div className="mt-3 flex flex-col gap-2 items-start">{children}</div>
-    </nav>
-  )
-}

packages/docs/app/components/sidebar-layout.tsx

@@ -1,16 +0,0 @@
-import type { ReactNode } from "react"
-
-export function SidebarLayout({
-  sidebar,
-  body,
-}: {
-  sidebar: ReactNode
-  body: ReactNode
-}) {
-  return (
-    <div className="flex items-start gap-6">
-      <div className="w-64 sticky top-24">{sidebar}</div>
-      <div className="flex-1 min-w-0">{body}</div>
-    </div>
-  )
-}

packages/docs/app/routes/docs.tsx

@@ -1,13 +1,11 @@
 import clsx from "clsx"
 import type { LoaderFunction } from "remix"
 import { Link, Outlet, useLoaderData } from "remix"
-import { HeaderLayout } from "~/components/header-layout"
-import { HeaderNav } from "~/components/header-nav"
-import { SideNav } from "~/components/side-nav"
-import { SidebarLayout } from "~/components/sidebar-layout"
+import { MainNavigation } from "~/components/main-navigation"
 import type { ContentIndexEntry } from "~/helpers/create-index.server"
 import { createContentIndex } from "~/helpers/create-index.server"
-import { docsProseClass, linkClass } from "~/styles"
+import { useScrolled } from "~/hooks/dom/use-scrolled"
+import { docsProseClass, linkClass, maxWidthContainer } from "~/styles"
 
 type LoaderData = ContentIndexEntry[]
 
@@ -19,26 +17,40 @@ export const loader: LoaderFunction = async () => {
 export default function Docs() {
   const data: LoaderData = useLoaderData()
   return (
-    <HeaderLayout
-      header={<HeaderNav />}
-      body={
-        <SidebarLayout
-          sidebar={
-            <SideNav heading="Guides">
+    <>
+      <HeaderPanel>
+        <div className={maxWidthContainer}>
+          <MainNavigation />
+        </div>
+      </HeaderPanel>
+      <main className={clsx(maxWidthContainer, "mt-8 flex items-start gap-4")}>
+        <nav className="w-64 sticky top-24">
+          <h2 className="text-2xl">Guides</h2>
+          <ul className="mt-3 flex flex-col gap-2 items-start">
             {data.map(({ title, route }) => (
-                <Link className={linkClass} key={route} to={route}>
+              <li key={route}>
+                <Link className={linkClass} to={route}>
                   {title}
                 </Link>
+              </li>
             ))}
-            </SideNav>
-          }
-          body={
-            <section className={clsx(docsProseClass, "pb-8")}>
+          </ul>
+        </nav>
+        <section className={clsx(docsProseClass, "pb-8 flex-1 min-w-0")}>
           <Outlet />
         </section>
-          }
-        />
-      }
-    />
+      </main>
+    </>
   )
 }
+
+function HeaderPanel({ children }: { children: React.ReactNode }) {
+  const isScrolled = useScrolled()
+
+  const className = clsx(
+    isScrolled ? "bg-slate-700/30" : "bg-slate-800",
+    "shadow-md sticky top-0 backdrop-blur-sm transition z-10 flex",
+  )
+
+  return <header className={className}>{children}</header>
+}

packages/docs/app/routes/index.tsx

@@ -1,13 +1,19 @@
 import packageJson from "reacord/package.json"
 import { Link } from "remix"
 import LandingExample from "~/components/landing-example.mdx"
+import { MainNavigation } from "~/components/main-navigation"
+import { maxWidthContainer } from "~/styles"
 
 export default function Landing() {
   return (
-    <main className="flex min-w-0 min-h-screen p-4 text-center">
-      <div className="w-full max-w-screen-md px-4 py-6 m-auto space-y-5 rounded-lg shadow-md bg-slate-800">
+    <div className="flex flex-col min-w-0 min-h-screen text-center">
+      <header className={maxWidthContainer}>
+        <MainNavigation />
+      </header>
+      <div className="pt-0 px-4 pb-8 m-auto">
+        <main className="max-w-screen-md px-4 py-6 m-auto space-y-5 rounded-lg shadow-md bg-slate-800">
           <h1 className="text-6xl font-light">reacord</h1>
-        <div className="w-full overflow-x-auto">
+          <div className="overflow-x-auto">
             <section className="mx-auto text-sm shadow w-fit sm:text-base">
               <LandingExample />
             </section>
@@ -15,11 +21,12 @@ export default function Landing() {
           <p className="px-8 text-2xl font-light">{packageJson.description}</p>
           <Link
             to="/docs/guides/getting-started"
-          className="inline-block px-4 py-3 text-xl transition rounded-lg bg-emerald-700 hover:translate-y-[-2px] hover:bg-emerald-800 hover:shadow-md "
+            className="inline-block px-4 py-3 text-xl transition rounded-lg bg-emerald-700 hover:translate-y-[-2px] hover:bg-emerald-800 hover:shadow-md"
           >
             Get Started
           </Link>
-      </div>
         </main>
+      </div>
+    </div>
   )
 }

packages/docs/app/styles.ts

@@ -1,5 +1,9 @@
 import clsx from "clsx"
 
+export const maxWidthContainer = clsx`
+  mx-auto w-full max-w-screen-lg px-4
+`
+
 export const linkClass = clsx`
   font-medium inline-block relative
   opacity-60 hover:opacity-100 transition-opacity