mobile responsiveness

packages/docs/app/routes/docs.tsx

@@ -20,11 +20,11 @@ export default function Docs() {
     <>
       <HeaderPanel>
         <div className={maxWidthContainer}>
-          <MainNavigation />
+          <MainNavigation guideRoutes={data} />
         </div>
       </HeaderPanel>
       <main className={clsx(maxWidthContainer, "mt-8 flex items-start gap-4")}>
-        <nav className="w-64 sticky top-24">
+        <nav className="w-48 sticky top-24 hidden md:block">
           <h2 className="text-2xl">Guides</h2>
           <ul className="mt-3 flex flex-col gap-2 items-start">
             {data.map(({ title, route }) => (
@@ -49,7 +49,7 @@ function HeaderPanel({ children }: { children: React.ReactNode }) {
 
   const className = clsx(
     isScrolled ? "bg-slate-700/30" : "bg-slate-800",
-    "shadow-md sticky top-0 backdrop-blur-sm transition z-10 flex",
+    "shadow sticky top-0 backdrop-blur-sm transition z-10 flex",
   )
 
   return <header className={className}>{children}</header>

packages/docs/app/routes/index.tsx

@@ -1,25 +1,36 @@
 import packageJson from "reacord/package.json"
-import { Link } from "remix"
+import type { LoaderFunction } from "remix"
+import { Link, useLoaderData } from "remix"
 import LandingExample from "~/components/landing-example.mdx"
 import { MainNavigation } from "~/components/main-navigation"
+import type { ContentIndexEntry } from "~/helpers/create-index.server"
+import { createContentIndex } from "~/helpers/create-index.server"
 import { maxWidthContainer } from "~/styles"
 
+type LoaderData = ContentIndexEntry[]
+
+export const loader: LoaderFunction = async () => {
+  const data: LoaderData = await createContentIndex("app/routes/docs/guides")
+  return data
+}
+
 export default function Landing() {
+  const data: LoaderData = useLoaderData()
   return (
     <div className="flex flex-col min-w-0 min-h-screen text-center">
       <header className={maxWidthContainer}>
-        <MainNavigation />
+        <MainNavigation guideRoutes={data} />
       </header>
       <div className="px-4 pb-8 flex flex-1">
-        <main className="px-4 py-6 rounded-lg shadow-md bg-slate-800 space-y-5 m-auto w-full max-w-xl">
+        <main className="px-4 py-6 rounded-lg shadow bg-slate-800 space-y-5 m-auto w-full max-w-xl">
           <h1 className="text-6xl font-light">reacord</h1>
-          <section className="mx-auto shadow text-sm sm:text-base">
+          <section className="mx-auto text-sm sm:text-base">
             <LandingExample />
           </section>
           <p className="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"
           >
             Get Started
           </Link>