Make doc nav sticky instead of fixed (#253)

* Make doc nav sticky instead of fixed * Use css vars for magic numbers
remix-run · Apr 18, 2024 · f4cfe7c · f4cfe7c
1 parent 46e120c
commit f4cfe7c
Showing 1 changed file with 30 additions and 21 deletions.
diff --git a/app/routes/docs.$lang.$ref.tsx b/app/routes/docs.$lang.$ref.tsx
@@ -105,7 +105,7 @@ export default function DocsLayout() {
   useCodeBlockCopyButton(docsContainer);
 
   return (
-    <div>
+    <div className="[--header-height:theme(spacing.16)] [--nav-width:theme(spacing.72)]">
       <div className="sticky top-0 z-20">
         <Header />
         <VersionWarningMobile />
@@ -119,24 +119,27 @@ export default function DocsLayout() {
         }
       >
         <InnerContainer>
-          <NavMenuDesktop />
-          <div
-            ref={docsContainer}
-            className={cx(
-              // add scroll margin to focused elements so that they aren't
-              // obscured by the sticky header
-              "[&_*:focus]:scroll-mt-[8rem] lg:[&_*:focus]:scroll-mt-[5rem]",
-              "min-h-[80vh]",
-              "lg:ml-72 lg:pl-6 xl:pl-10 2xl:pl-12",
-              !changingVersions && navigating
-                ? "opacity-25 transition-opacity delay-300"
-                : "",
-            )}
-          >
-            <Outlet />
-          </div>
-          <div className="min-w-0 pt-8 sm:pt-10 lg:ml-72 lg:pl-6 lg:pt-12 xl:pl-10 2xl:pl-12">
-            <Footer />
+          <div className="block lg:flex">
+            <NavMenuDesktop />
+            <div
+              ref={docsContainer}
+              className={cx(
+                // add scroll margin to focused elements so that they aren't
+                // obscured by the sticky header
+                "[&_*:focus]:scroll-mt-[8rem] lg:[&_*:focus]:scroll-mt-[5rem]",
+                // Account for the left navbar
+                "min-h-[80vh] lg:ml-3 lg:w-[calc(100%-var(--nav-width))]",
+                "lg:pl-6 xl:pl-10 2xl:pl-12",
+                !changingVersions && navigating
+                  ? "opacity-25 transition-opacity delay-300"
+                  : "",
+              )}
+            >
+              <Outlet />
+              <div className="pt-8 sm:pt-10 lg:pt-12">
+                <Footer />
+              </div>
+            </div>
           </div>
         </InnerContainer>
       </div>
@@ -185,7 +188,7 @@ function Header() {
       )}
     >
       <InnerContainer>
-        <div className="relative z-20 flex h-16 w-full items-center justify-between py-3">
+        <div className="relative z-20 flex h-[--header-height] w-full items-center justify-between py-3">
           <div className="flex w-full items-center justify-between gap-4 sm:gap-8 md:w-auto">
             <Link
               className="flex"
@@ -617,7 +620,13 @@ function NavMenuMobile() {
 
 function NavMenuDesktop() {
   return (
-    <div className="fixed bottom-0 top-16 -ml-3 hidden w-72 flex-col gap-3 overflow-auto pb-10 pr-5 pt-5 lg:flex">
+    <div
+      className={cx(
+        "sticky bottom-0 top-16 -ml-3 hidden w-[--nav-width] flex-col gap-3 self-start overflow-auto pb-10 pr-5 pt-5 lg:flex",
+        // Account for the height of the top nav
+        "h-[calc(100vh-var(--header-height))]",
+      )}
+    >
       <DocSearchSection />
       <div className="[&_*:focus]:scroll-mt-[6rem]">
         <Menu />