From 88e98a9bc12162459a7ca8405990c12bdc05d34d Mon Sep 17 00:00:00 2001
From: MapleLeaf <19603573+itsMapleLeaf@users.noreply.github.com>
Date: Thu, 30 Dec 2021 20:08:40 -0600
Subject: [PATCH] add main nav on landing + clean up

---
 .../docs/app/components/header-layout.tsx     | 25 --------
 .../{header-nav.tsx => main-navigation.tsx}   |  4 +-
 packages/docs/app/components/side-nav.tsx     | 16 -----
 .../docs/app/components/sidebar-layout.tsx    | 16 -----
 packages/docs/app/routes/docs.tsx             | 60 +++++++++++--------
 packages/docs/app/routes/index.tsx            | 39 +++++++-----
 packages/docs/app/styles.ts                   |  4 ++
 7 files changed, 65 insertions(+), 99 deletions(-)
 delete mode 100644 packages/docs/app/components/header-layout.tsx
 rename packages/docs/app/components/{header-nav.tsx => main-navigation.tsx} (90%)
 delete mode 100644 packages/docs/app/components/side-nav.tsx
 delete mode 100644 packages/docs/app/components/sidebar-layout.tsx

diff --git a/packages/docs/app/components/header-layout.tsx b/packages/docs/app/components/header-layout.tsx
deleted file mode 100644
index b51512f..0000000
--- a/packages/docs/app/components/header-layout.tsx
+++ /dev/null
@@ -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>
-  )
-}
diff --git a/packages/docs/app/components/header-nav.tsx b/packages/docs/app/components/main-navigation.tsx
similarity index 90%
rename from packages/docs/app/components/header-nav.tsx
rename to packages/docs/app/components/main-navigation.tsx
index 4b20b50..babc617 100644
--- a/packages/docs/app/components/header-nav.tsx
+++ b/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>
diff --git a/packages/docs/app/components/side-nav.tsx b/packages/docs/app/components/side-nav.tsx
deleted file mode 100644
index e2ae8d3..0000000
--- a/packages/docs/app/components/side-nav.tsx
+++ /dev/null
@@ -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>
-  )
-}
diff --git a/packages/docs/app/components/sidebar-layout.tsx b/packages/docs/app/components/sidebar-layout.tsx
deleted file mode 100644
index 265874f..0000000
--- a/packages/docs/app/components/sidebar-layout.tsx
+++ /dev/null
@@ -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>
-  )
-}
diff --git a/packages/docs/app/routes/docs.tsx b/packages/docs/app/routes/docs.tsx
index c361c72..79fc316 100644
--- a/packages/docs/app/routes/docs.tsx
+++ b/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">
-              {data.map(({ title, route }) => (
-                <Link className={linkClass} key={route} to={route}>
+    <>
+      <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 }) => (
+              <li key={route}>
+                <Link className={linkClass} to={route}>
                   {title}
                 </Link>
-              ))}
-            </SideNav>
-          }
-          body={
-            <section className={clsx(docsProseClass, "pb-8")}>
-              <Outlet />
-            </section>
-          }
-        />
-      }
-    />
+              </li>
+            ))}
+          </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>
+}
diff --git a/packages/docs/app/routes/index.tsx b/packages/docs/app/routes/index.tsx
index d56dd6c..6193b30 100644
--- a/packages/docs/app/routes/index.tsx
+++ b/packages/docs/app/routes/index.tsx
@@ -1,25 +1,32 @@
 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">
-        <h1 className="text-6xl font-light">reacord</h1>
-        <div className="w-full overflow-x-auto">
-          <section className="mx-auto text-sm shadow w-fit sm:text-base">
-            <LandingExample />
-          </section>
-        </div>
-        <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 "
-        >
-          Get Started
-        </Link>
+    <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="overflow-x-auto">
+            <section className="mx-auto text-sm shadow w-fit sm:text-base">
+              <LandingExample />
+            </section>
+          </div>
+          <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"
+          >
+            Get Started
+          </Link>
+        </main>
       </div>
-    </main>
+    </div>
   )
 }
diff --git a/packages/docs/app/styles.ts b/packages/docs/app/styles.ts
index c1c0006..1e3a060 100644
--- a/packages/docs/app/styles.ts
+++ b/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