Make doc nav sticky instead of fixed

remix-run · Apr 9, 2024 · 71cc3d4 · 71cc3d4
1 parent 46e120c
commit 71cc3d4
Showing 1 changed file with 28 additions and 19 deletions.
diff --git a/app/routes/docs.$lang.$ref.tsx b/app/routes/docs.$lang.$ref.tsx
@@ -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%-theme(spacing.72))]",
+                "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>
@@ -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-72 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-theme(spacing.16))]",
+      )}
+    >
       <DocSearchSection />
       <div className="[&_*:focus]:scroll-mt-[6rem]">
         <Menu />