From a511dc0ef101597a9383c4ad602499d16a0c7fed Mon Sep 17 00:00:00 2001
From: Josh Derocher-Vlk <josh@vlkpack.com>
Date: Mon, 5 May 2025 20:56:33 +0200
Subject: [PATCH 01/15] create sub nav for docs

---
 src/components/Navigation.res | 180 ++++++++++++++++++----------------
 1 file changed, 94 insertions(+), 86 deletions(-)

diff --git a/src/components/Navigation.res b/src/components/Navigation.res
index d75624361..8d081532a 100644
--- a/src/components/Navigation.res
+++ b/src/components/Navigation.res
@@ -73,98 +73,106 @@ let make = (~fixed=true, ~isOverlayOpen: bool, ~setOverlayOpen: (bool => bool) =
   let fixedNav = fixed ? "fixed top-0" : "relative"
 
   <>
-    <nav
+    <header
       id="header"
       style={ReactDOMStyle.make(~minWidth, ())}
-      className={fixedNav ++ " items-center z-50 px-4 flex xs:justify-center w-full h-16 bg-gray-90 shadow text-white-80 text-14 transition duration-300 ease-out group-[.nav-disappear]:-translate-y-16 md:group-[.nav-disappear]:transform-none"}>
-      <div className="flex justify-between items-center h-full w-full max-w-1280">
-        <div className="h-8 w-8 lg:h-10 lg:w-32">
-          <a
-            href="/"
-            className="block hover:cursor-pointer w-full h-full flex justify-center items-center font-bold">
-            <img src="/static/nav-logo@2x.png" className="lg:hidden" />
-            <img src="/static/nav-logo-full@2x.png" className="hidden lg:block" />
-          </a>
-        </div>
-        /* Desktop horizontal navigation */
-        <div
-          className="flex items-center xs:justify-between w-full bg-gray-90 sm:h-auto sm:relative">
-          <div
-            className="flex ml-10 space-x-5 w-full max-w-320"
-            style={ReactDOMStyle.make(~maxWidth="26rem", ())}>
-            <Link
-              href={`/docs/manual/${version}/introduction`}
-              className={isActiveLink(~route, ~href=`/docs/manual/${version}/introduction`)}>
-              {React.string("Docs")}
-            </Link>
-            <Link
-              href={`/docs/manual/${version}/api`}
-              className={isActiveLink(~route, ~href=`/docs/manual/${version}/api`)}>
-              {React.string("API")}
-            </Link>
-            <Link href={`/syntax-lookup`} className={isActiveLink(~route, ~href=`/syntax-lookup`)}>
-              {React.string("Syntax")}
-            </Link>
-            <Link
-              href={`/docs/react/latest/introduction`}
-              className={isActiveLink(~route, ~href=`/docs/react/latest/introduction`)}>
-              {React.string("React")}
-            </Link>
-            <Link
-              href="/try"
-              className={"hidden xs:block " ++ linkOrActiveLink(~target="/try", ~route)}>
-              {React.string("Playground")}
-            </Link>
-            <Link
-              href="/blog"
-              className={"hidden xs:block " ++ linkOrActiveLinkSubroute(~target="/blog", ~route)}>
-              {React.string("Blog")}
-            </Link>
-            <Link
-              href="/community/overview"
-              className={"hidden xs:block " ++ linkOrActiveLink(~target="/community", ~route)}>
-              {React.string("Community")}
-            </Link>
+      className={fixedNav ++ " items-center z-50 w-full transition duration-300 ease-out group-[.nav-disappear]:-translate-y-16 md:group-[.nav-disappear]:transform-none"}>
+      <nav className="px-4 flex xs:justify-center bg-gray-90 shadow h-16 text-white-80 text-14">
+        <div className="flex justify-between items-center h-full w-full max-w-1280">
+          <div className="h-8 w-8 lg:h-10 lg:w-32">
+            <a
+              href="/"
+              className="block hover:cursor-pointer w-full h-full flex justify-center items-center font-bold">
+              <img src="/static/nav-logo@2x.png" className="lg:hidden" />
+              <img src="/static/nav-logo-full@2x.png" className="hidden lg:block" />
+            </a>
           </div>
-          <div className="md:flex flex items-center">
-            <Search />
-            <div className="hidden md:flex items-center ml-5">
-              <a href=Constants.githubHref rel="noopener noreferrer" className={"mr-5 " ++ link}>
-                <Icon.GitHub className="w-6 h-6 opacity-50 hover:opacity-100" />
-              </a>
-              <a href=Constants.xHref rel="noopener noreferrer" className={"mr-5 " ++ link}>
-                <Icon.X className="w-6 h-6 opacity-50 hover:opacity-100" />
-              </a>
-              <a href=Constants.blueSkyHref rel="noopener noreferrer" className={"mr-5 " ++ link}>
-                <Icon.Bluesky className="w-6 h-6 opacity-50 hover:opacity-100" />
-              </a>
-              <a href=Constants.discourseHref rel="noopener noreferrer" className=link>
-                <Icon.Discourse className="w-6 h-6 opacity-50 hover:opacity-100" />
-              </a>
+          /* Desktop horizontal navigation */
+          <div
+            className="flex items-center xs:justify-between w-full bg-gray-90 sm:h-auto sm:relative">
+            <div
+              className="flex ml-10 space-x-5 w-full max-w-320"
+              style={ReactDOMStyle.make(~maxWidth="26rem", ())}>
+              <Link
+                href={`/docs/manual/${version}/introduction`}
+                className={isActiveLink(~route, ~href=`/docs/manual/${version}/introduction`)}>
+                {React.string("Docs")}
+              </Link>
+
+              <Link
+                href="/try"
+                className={"hidden xs:block " ++ linkOrActiveLink(~target="/try", ~route)}>
+                {React.string("Playground")}
+              </Link>
+              <Link
+                href="/blog"
+                className={"hidden xs:block " ++ linkOrActiveLinkSubroute(~target="/blog", ~route)}>
+                {React.string("Blog")}
+              </Link>
+              <Link
+                href="/community/overview"
+                className={"hidden xs:block " ++ linkOrActiveLink(~target="/community", ~route)}>
+                {React.string("Community")}
+              </Link>
+            </div>
+            <div className="md:flex flex items-center">
+              <Search />
+              <div className="hidden md:flex items-center ml-5">
+                <a href=Constants.githubHref rel="noopener noreferrer" className={"mr-5 " ++ link}>
+                  <Icon.GitHub className="w-6 h-6 opacity-50 hover:opacity-100" />
+                </a>
+                <a href=Constants.xHref rel="noopener noreferrer" className={"mr-5 " ++ link}>
+                  <Icon.X className="w-6 h-6 opacity-50 hover:opacity-100" />
+                </a>
+                <a href=Constants.blueSkyHref rel="noopener noreferrer" className={"mr-5 " ++ link}>
+                  <Icon.Bluesky className="w-6 h-6 opacity-50 hover:opacity-100" />
+                </a>
+                <a href=Constants.discourseHref rel="noopener noreferrer" className=link>
+                  <Icon.Discourse className="w-6 h-6 opacity-50 hover:opacity-100" />
+                </a>
+              </div>
             </div>
           </div>
         </div>
-      </div>
-      /* Burger Button */
-      <button
-        className="h-full px-4 xs:hidden flex items-center hover:text-white"
-        onClick={evt => {
-          ReactEvent.Mouse.preventDefault(evt)
-          toggleOverlay()
-        }}>
-        <Icon.DrawerDots
-          className={"h-1 w-auto block " ++ (isOverlayOpen ? "text-fire" : "text-gray-60")}
-        />
-      </button>
-      /* Mobile overlay */
-      <div
-        style={ReactDOMStyle.make(~minWidth, ~top="4rem", ())}
-        className={(
-          isOverlayOpen ? "flex" : "hidden"
-        ) ++ " sm:hidden flex-col fixed top-0 left-0 h-full w-full z-50 sm:w-9/12 bg-gray-100 sm:h-auto sm:flex sm:relative sm:flex-row sm:justify-between"}>
-        <MobileNav route />
-      </div>
-    </nav>
+        /* Burger Button */
+        <button
+          className="h-full px-4 xs:hidden flex items-center hover:text-white"
+          onClick={evt => {
+            ReactEvent.Mouse.preventDefault(evt)
+            toggleOverlay()
+          }}>
+          <Icon.DrawerDots
+            className={"h-1 w-auto block " ++ (isOverlayOpen ? "text-fire" : "text-gray-60")}
+          />
+        </button>
+        /* Mobile overlay */
+        <div
+          style={ReactDOMStyle.make(~minWidth, ~top="4rem", ())}
+          className={(
+            isOverlayOpen ? "flex" : "hidden"
+          ) ++ " sm:hidden flex-col fixed top-0 left-0 h-full w-full z-50 sm:w-9/12 bg-gray-100 sm:h-auto sm:flex sm:relative sm:flex-row sm:justify-between"}>
+          <MobileNav route />
+        </div>
+      </nav>
+      <nav
+        className="z-50 px-4 w-full h-14 bg-gray-100 shadow text-white-80 text-12 transition duration-300 ease-out group-[.nav-disappear]:-translate-y-16 md:group-[.nav-disappear]:transform-none">
+        <div className="p-l-16 flex gap-16 items-center h-full w-full max-w-md">
+          <Link
+            href={`/docs/manual/${version}/api`}
+            className={isActiveLink(~route, ~href=`/docs/manual/${version}/api`)}>
+            {React.string("API")}
+          </Link>
+          <Link href={`/syntax-lookup`} className={isActiveLink(~route, ~href=`/syntax-lookup`)}>
+            {React.string("Syntax")}
+          </Link>
+          <Link
+            href={`/docs/react/latest/introduction`}
+            className={isActiveLink(~route, ~href=`/docs/react/latest/introduction`)}>
+            {React.string("React")}
+          </Link>
+        </div>
+      </nav>
+    </header>
   </>
 }
 

From bff50b5601a63bcfa84ee174f33ff60ea4255eb9 Mon Sep 17 00:00:00 2001
From: Josh Derocher-Vlk <josh@vlkpack.com>
Date: Tue, 6 May 2025 12:39:54 +0200
Subject: [PATCH 02/15] basics in place, not done at all

---
 src/components/Navigation.res | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Navigation.res b/src/components/Navigation.res
index 8d081532a..a9bb95bd3 100644
--- a/src/components/Navigation.res
+++ b/src/components/Navigation.res
@@ -156,7 +156,7 @@ let make = (~fixed=true, ~isOverlayOpen: bool, ~setOverlayOpen: (bool => bool) =
       </nav>
       <nav
         className="z-50 px-4 w-full h-14 bg-gray-100 shadow text-white-80 text-12 transition duration-300 ease-out group-[.nav-disappear]:-translate-y-16 md:group-[.nav-disappear]:transform-none">
-        <div className="p-l-16 flex gap-16 items-center h-full w-full max-w-md">
+        <div className="pl-30 flex gap-16 items-center h-full w-full max-w-md">
           <Link
             href={`/docs/manual/${version}/api`}
             className={isActiveLink(~route, ~href=`/docs/manual/${version}/api`)}>

From 1681a02ac9adc84d4ca30eb7b857738467d799ad Mon Sep 17 00:00:00 2001
From: Josh Derocher-Vlk <josh@vlkpack.com>
Date: Tue, 6 May 2025 14:29:43 +0200
Subject: [PATCH 03/15] functionality is done

---
 src/SyntaxLookup.res          |  2 +-
 src/components/Navigation.res | 70 +++++++++++++++++++++++------------
 src/layouts/SidebarLayout.res |  6 +--
 3 files changed, 50 insertions(+), 28 deletions(-)

diff --git a/src/SyntaxLookup.res b/src/SyntaxLookup.res
index f98e9f76d..2f14c9525 100644
--- a/src/SyntaxLookup.res
+++ b/src/SyntaxLookup.res
@@ -374,7 +374,7 @@ let default = (props: props) => {
       <div className="text-gray-80">
         <Navigation isOverlayOpen setOverlayOpen />
         <div className="flex xs:justify-center overflow-hidden pb-48">
-          <main className="mt-16 min-w-320 lg:align-center w-full px-4 md:px-8 max-w-1280">
+          <main className="mt-24 min-w-320 lg:align-center w-full px-4 md:px-8 max-w-1280">
             <MdxProvider components=MarkdownComponents.default>
               <div className="flex justify-center">
                 <div className="max-w-740 w-full"> content </div>
diff --git a/src/components/Navigation.res b/src/components/Navigation.res
index a9bb95bd3..f31f0f071 100644
--- a/src/components/Navigation.res
+++ b/src/components/Navigation.res
@@ -1,6 +1,6 @@
 module Link = Next.Link
 
-let link = "no-underline block hover:cursor-pointer hover:text-fire-30 text-gray-40 mb-px"
+let link = "no-underline block hover:cursor-pointer hover:text-fire-30 mb-px"
 let activeLink = "font-medium text-fire-30 border-b border-fire"
 
 let linkOrActiveLink = (~target, ~route) => target === route ? activeLink : link
@@ -8,10 +8,22 @@ let linkOrActiveLink = (~target, ~route) => target === route ? activeLink : link
 let linkOrActiveLinkSubroute = (~target, ~route) =>
   String.startsWith(route, target) ? activeLink : link
 
-let isActiveLink = (~route: string, ~href: string) => {
-  route == href ? activeLink : link
+let isActiveLink = (~includes: string, ~excludes: option<string>=?, ~route: string) => {
+  // includes means we want the lnk to be active if it contains the expected text
+  let includes = route->String.includes(includes)
+  // excludes allows us to not have links be active even if they do have the includes text
+  let excludes = switch excludes {
+  | Some(excludes) => route->String.includes(excludes)
+  | None => false
+  }
+  includes && !excludes ? activeLink : link
 }
 
+let isDocRoute = (~route) =>
+  route->String.includes("/docs/") || route->String.includes("/syntax-lookup")
+
+let isDocRouteActive = (~route) => isDocRoute(~route) ? activeLink : link
+
 module MobileNav = {
   @react.component
   let make = (~route: string) => {
@@ -91,11 +103,10 @@ let make = (~fixed=true, ~isOverlayOpen: bool, ~setOverlayOpen: (bool => bool) =
           <div
             className="flex items-center xs:justify-between w-full bg-gray-90 sm:h-auto sm:relative">
             <div
-              className="flex ml-10 space-x-5 w-full max-w-320"
+              className="flex ml-10 space-x-5 w-full max-w-320 text-gray-40"
               style={ReactDOMStyle.make(~maxWidth="26rem", ())}>
               <Link
-                href={`/docs/manual/${version}/introduction`}
-                className={isActiveLink(~route, ~href=`/docs/manual/${version}/introduction`)}>
+                href={`/docs/manual/${version}/introduction`} className={isDocRouteActive(~route)}>
                 {React.string("Docs")}
               </Link>
 
@@ -154,24 +165,35 @@ let make = (~fixed=true, ~isOverlayOpen: bool, ~setOverlayOpen: (bool => bool) =
           <MobileNav route />
         </div>
       </nav>
-      <nav
-        className="z-50 px-4 w-full h-14 bg-gray-100 shadow text-white-80 text-12 transition duration-300 ease-out group-[.nav-disappear]:-translate-y-16 md:group-[.nav-disappear]:transform-none">
-        <div className="pl-30 flex gap-16 items-center h-full w-full max-w-md">
-          <Link
-            href={`/docs/manual/${version}/api`}
-            className={isActiveLink(~route, ~href=`/docs/manual/${version}/api`)}>
-            {React.string("API")}
-          </Link>
-          <Link href={`/syntax-lookup`} className={isActiveLink(~route, ~href=`/syntax-lookup`)}>
-            {React.string("Syntax")}
-          </Link>
-          <Link
-            href={`/docs/react/latest/introduction`}
-            className={isActiveLink(~route, ~href=`/docs/react/latest/introduction`)}>
-            {React.string("React")}
-          </Link>
-        </div>
-      </nav>
+      // This is a subnav for documentation pages
+      {isDocRoute(~route)
+        ? <nav
+            id="docs-subnav"
+            className="z-50 px-4 w-full h-12 bg-gray-70 shadow text-white text-14 transition duration-300 ease-out group-[.nav-disappear]:-translate-y-16 md:group-[.nav-disappear]:transform-none">
+            <div className="pl-30 flex gap-10 items-center h-full w-full max-w-md">
+              <Link
+                href={`/docs/manual/${version}/introduction`}
+                className={isActiveLink(~includes="/docs/manual/", ~excludes="/api", ~route)}>
+                {React.string("Language Manual")}
+              </Link>
+              <Link
+                href={`/docs/manual/${version}/api`}
+                className={isActiveLink(~includes="/api", ~route)}>
+                {React.string("API")}
+              </Link>
+              <Link
+                href={`/syntax-lookup`}
+                className={isActiveLink(~includes="/syntax-lookup", ~route)}>
+                {React.string("Syntax Lookup")}
+              </Link>
+              <Link
+                href={`/docs/react/latest/introduction`}
+                className={isActiveLink(~includes="/docs/react/", ~route)}>
+                {React.string("React")}
+              </Link>
+            </div>
+          </nav>
+        : React.null}
     </header>
   </>
 }
diff --git a/src/layouts/SidebarLayout.res b/src/layouts/SidebarLayout.res
index bafdd84ca..b13d6148a 100644
--- a/src/layouts/SidebarLayout.res
+++ b/src/layouts/SidebarLayout.res
@@ -138,10 +138,10 @@ module Sidebar = {
         id="sidebar"
         className={(
           isOpen ? "fixed w-full left-0 h-full z-20 min-w-320" : "hidden "
-        ) ++ " md:block md:w-48 md:-ml-4 lg:w-1/5 md:h-auto md:relative overflow-y-visible bg-white"}>
+        ) ++ " overflow-x-hidden md:block md:w-48 md:-ml-4 lg:w-1/5 md:h-auto md:relative overflow-y-visible bg-white"}>
         <aside
           id="sidebar-content"
-          className="relative top-0 px-4 w-full block md:top-16 md:pt-16 md:sticky border-r border-gray-20 overflow-y-auto pb-24"
+          className="relative top-0 px-4 w-full block md:top-16 md:pt-4 md:sticky border-r border-gray-20 overflow-y-auto pb-24"
           style={ReactDOMStyle.make(~height="calc(100vh - 4.5rem", ())}>
           <div className="flex justify-between">
             <div className="w-3/4 md:w-full"> toplevelNav </div>
@@ -309,7 +309,7 @@ let make = (
         <div className="flex lg:justify-center">
           <div className="flex w-full max-w-1280 md:mx-8">
             sidebar
-            <main className="px-4 w-full pt-16 md:ml-12 lg:mr-8 mb-32 md:max-w-576 lg:max-w-740">
+            <main className="px-4 w-full pt-20 md:ml-12 lg:mr-8 mb-32 md:max-w-576 lg:max-w-740">
               //width of the right content part
               <div
                 className={"z-10 fixed border-b shadow top-16 left-0 pl-4 bg-white w-full py-4 md:relative md:border-none md:shadow-none md:p-0 md:top-auto flex items-center transition duration-300 ease-out group-[.nav-disappear]:-translate-y-32 md:group-[.nav-disappear]:transform-none"}>

From 3743c9b6dceb07418a3e96d4aa1025bdeee3e9bf Mon Sep 17 00:00:00 2001
From: Josh Derocher-Vlk <josh@vlkpack.com>
Date: Tue, 6 May 2025 14:32:17 +0200
Subject: [PATCH 04/15] light background

---
 src/components/Navigation.res | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Navigation.res b/src/components/Navigation.res
index f31f0f071..fae4cadda 100644
--- a/src/components/Navigation.res
+++ b/src/components/Navigation.res
@@ -169,7 +169,7 @@ let make = (~fixed=true, ~isOverlayOpen: bool, ~setOverlayOpen: (bool => bool) =
       {isDocRoute(~route)
         ? <nav
             id="docs-subnav"
-            className="z-50 px-4 w-full h-12 bg-gray-70 shadow text-white text-14 transition duration-300 ease-out group-[.nav-disappear]:-translate-y-16 md:group-[.nav-disappear]:transform-none">
+            className="z-50 px-4 w-full h-12 shadow text-gray-60 text-14 transition duration-300 ease-out group-[.nav-disappear]:-translate-y-16 md:group-[.nav-disappear]:transform-none">
             <div className="pl-30 flex gap-10 items-center h-full w-full max-w-md">
               <Link
                 href={`/docs/manual/${version}/introduction`}

From bd6b4a49115f5cc314a222aad7cea61c07098b63 Mon Sep 17 00:00:00 2001
From: Josh Derocher-Vlk <josh@vlkpack.com>
Date: Tue, 6 May 2025 15:07:06 +0200
Subject: [PATCH 05/15] mobile formatting

---
 src/components/Navigation.res | 5 +++--
 src/layouts/SidebarLayout.res | 2 +-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/Navigation.res b/src/components/Navigation.res
index fae4cadda..a5deefd54 100644
--- a/src/components/Navigation.res
+++ b/src/components/Navigation.res
@@ -169,8 +169,9 @@ let make = (~fixed=true, ~isOverlayOpen: bool, ~setOverlayOpen: (bool => bool) =
       {isDocRoute(~route)
         ? <nav
             id="docs-subnav"
-            className="z-50 px-4 w-full h-12 shadow text-gray-60 text-14 transition duration-300 ease-out group-[.nav-disappear]:-translate-y-16 md:group-[.nav-disappear]:transform-none">
-            <div className="pl-30 flex gap-10 items-center h-full w-full max-w-md">
+            className="bg-white z-50 px-4 w-full h-12 shadow text-gray-60 text-12 md:text-14 transition duration-300 ease-out group-[.nav-disappear]:-translate-y-16 md:group-[.nav-disappear]:transform-none">
+            <div
+              className="pl-30 flex gap-2 md:gap-6 lg:gap-10 items-center h-full w-full max-w-md">
               <Link
                 href={`/docs/manual/${version}/introduction`}
                 className={isActiveLink(~includes="/docs/manual/", ~excludes="/api", ~route)}>
diff --git a/src/layouts/SidebarLayout.res b/src/layouts/SidebarLayout.res
index b13d6148a..411093b7b 100644
--- a/src/layouts/SidebarLayout.res
+++ b/src/layouts/SidebarLayout.res
@@ -312,7 +312,7 @@ let make = (
             <main className="px-4 w-full pt-20 md:ml-12 lg:mr-8 mb-32 md:max-w-576 lg:max-w-740">
               //width of the right content part
               <div
-                className={"z-10 fixed border-b shadow top-16 left-0 pl-4 bg-white w-full py-4 md:relative md:border-none md:shadow-none md:p-0 md:top-auto flex items-center transition duration-300 ease-out group-[.nav-disappear]:-translate-y-32 md:group-[.nav-disappear]:transform-none"}>
+                className={"z-10 fixed border-b shadow top-26 left-0 pl-4 bg-white w-full py-4 md:relative md:border-none md:shadow-none md:p-0 md:top-auto flex items-center transition duration-300 ease-out group-[.nav-disappear]:-translate-y-32 md:group-[.nav-disappear]:transform-none"}>
                 <MobileDrawerButton hidden=isNavOpen onClick={handleDrawerButtonClick} />
                 <div
                   className="truncate overflow-x-auto touch-scroll flex items-center space-x-4 md:justify-between mr-4 w-full">

From 60c5b218675e63ff5d7001ba8df69592af1f9915 Mon Sep 17 00:00:00 2001
From: Josh Derocher-Vlk <josh@vlkpack.com>
Date: Tue, 6 May 2025 15:55:17 +0200
Subject: [PATCH 06/15] fix mobile formatting

---
 src/layouts/SidebarLayout.res | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/layouts/SidebarLayout.res b/src/layouts/SidebarLayout.res
index 411093b7b..09d84aec6 100644
--- a/src/layouts/SidebarLayout.res
+++ b/src/layouts/SidebarLayout.res
@@ -312,7 +312,7 @@ let make = (
             <main className="px-4 w-full pt-20 md:ml-12 lg:mr-8 mb-32 md:max-w-576 lg:max-w-740">
               //width of the right content part
               <div
-                className={"z-10 fixed border-b shadow top-26 left-0 pl-4 bg-white w-full py-4 md:relative md:border-none md:shadow-none md:p-0 md:top-auto flex items-center transition duration-300 ease-out group-[.nav-disappear]:-translate-y-32 md:group-[.nav-disappear]:transform-none"}>
+                className={"z-10 fixed border-b shadow top-[112px] left-0 pl-4 bg-white w-full py-4 md:relative md:border-none md:shadow-none md:p-0 md:top-auto flex items-center transition duration-300 ease-out group-[.nav-disappear]:-translate-y-32 md:group-[.nav-disappear]:transform-none"}>
                 <MobileDrawerButton hidden=isNavOpen onClick={handleDrawerButtonClick} />
                 <div
                   className="truncate overflow-x-auto touch-scroll flex items-center space-x-4 md:justify-between mr-4 w-full">

From 49f9ed9eb132455c05ed59f7c9c5ed8eed9be27a Mon Sep 17 00:00:00 2001
From: Josh Derocher-Vlk <josh@vlkpack.com>
Date: Tue, 6 May 2025 16:19:13 +0200
Subject: [PATCH 07/15] mobile nav color fixes

---
 src/components/Navigation.res | 6 +++---
 src/layouts/SidebarLayout.res | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/Navigation.res b/src/components/Navigation.res
index a5deefd54..ebf4dd909 100644
--- a/src/components/Navigation.res
+++ b/src/components/Navigation.res
@@ -27,9 +27,9 @@ let isDocRouteActive = (~route) => isDocRoute(~route) ? activeLink : link
 module MobileNav = {
   @react.component
   let make = (~route: string) => {
-    let base = "font-normal mx-4 py-5 text-gray-20 border-b border-gray-80"
+    let base = "font-normal mx-4 py-5 text-gray-40 border-b border-gray-80"
     let extLink = "block hover:cursor-pointer hover:text-white text-gray-60"
-    <div className="border-gray-80 border-t">
+    <div className="border-gray-80 border-tn">
       <ul>
         <li className=base>
           <Link href="/try" className={linkOrActiveLink(~target="/try", ~route)}>
@@ -126,7 +126,7 @@ let make = (~fixed=true, ~isOverlayOpen: bool, ~setOverlayOpen: (bool => bool) =
                 {React.string("Community")}
               </Link>
             </div>
-            <div className="md:flex flex items-center">
+            <div className="md:flex flex items-center text-gray-60">
               <Search />
               <div className="hidden md:flex items-center ml-5">
                 <a href=Constants.githubHref rel="noopener noreferrer" className={"mr-5 " ++ link}>
diff --git a/src/layouts/SidebarLayout.res b/src/layouts/SidebarLayout.res
index 09d84aec6..03b952ca6 100644
--- a/src/layouts/SidebarLayout.res
+++ b/src/layouts/SidebarLayout.res
@@ -320,7 +320,7 @@ let make = (
                   editLinkEl
                 </div>
               </div>
-              <div className={hasBreadcrumbs ? "mt-10" : "-mt-4"}>
+              <div className={hasBreadcrumbs ? "mt-10" : "mt-6 md:-mt-4"}>
                 <MdxProvider components> children </MdxProvider>
               </div>
               pagination

From 576f98005afb782946cbba085b1e4f254ea9e6bb Mon Sep 17 00:00:00 2001
From: Josh Derocher-Vlk <josh@vlkpack.com>
Date: Tue, 6 May 2025 17:41:00 +0200
Subject: [PATCH 08/15] fix wide desktop position

---
 src/components/Navigation.res | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Navigation.res b/src/components/Navigation.res
index ebf4dd909..963399592 100644
--- a/src/components/Navigation.res
+++ b/src/components/Navigation.res
@@ -171,7 +171,7 @@ let make = (~fixed=true, ~isOverlayOpen: bool, ~setOverlayOpen: (bool => bool) =
             id="docs-subnav"
             className="bg-white z-50 px-4 w-full h-12 shadow text-gray-60 text-12 md:text-14 transition duration-300 ease-out group-[.nav-disappear]:-translate-y-16 md:group-[.nav-disappear]:transform-none">
             <div
-              className="pl-30 flex gap-2 md:gap-6 lg:gap-10 items-center h-full w-full max-w-md">
+              className="pl-30 flex gap-2 md:gap-6 lg:gap-10 items-center h-full w-full max-w-1280 m-auto">
               <Link
                 href={`/docs/manual/${version}/introduction`}
                 className={isActiveLink(~includes="/docs/manual/", ~excludes="/api", ~route)}>

From ccfc696d6ed567169c1995716e9c154c5c6d4a6c Mon Sep 17 00:00:00 2001
From: Josh Derocher-Vlk <josh@vlkpack.com>
Date: Tue, 6 May 2025 17:47:02 +0200
Subject: [PATCH 09/15] increase mobile gap

---
 src/components/Navigation.res | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Navigation.res b/src/components/Navigation.res
index 963399592..b5f01671c 100644
--- a/src/components/Navigation.res
+++ b/src/components/Navigation.res
@@ -171,7 +171,7 @@ let make = (~fixed=true, ~isOverlayOpen: bool, ~setOverlayOpen: (bool => bool) =
             id="docs-subnav"
             className="bg-white z-50 px-4 w-full h-12 shadow text-gray-60 text-12 md:text-14 transition duration-300 ease-out group-[.nav-disappear]:-translate-y-16 md:group-[.nav-disappear]:transform-none">
             <div
-              className="pl-30 flex gap-2 md:gap-6 lg:gap-10 items-center h-full w-full max-w-1280 m-auto">
+              className="pl-30 flex gap-6 md:gap-6 lg:gap-10 items-center h-full w-full max-w-1280 m-auto">
               <Link
                 href={`/docs/manual/${version}/introduction`}
                 className={isActiveLink(~includes="/docs/manual/", ~excludes="/api", ~route)}>

From 981164bc3d7f58d1e1dc2776f07d13a9a608dca0 Mon Sep 17 00:00:00 2001
From: Josh Derocher-Vlk <josh@vlkpack.com>
Date: Tue, 6 May 2025 17:49:05 +0200
Subject: [PATCH 10/15] remove unused class

---
 src/components/Navigation.res | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Navigation.res b/src/components/Navigation.res
index b5f01671c..48bfb3863 100644
--- a/src/components/Navigation.res
+++ b/src/components/Navigation.res
@@ -171,7 +171,7 @@ let make = (~fixed=true, ~isOverlayOpen: bool, ~setOverlayOpen: (bool => bool) =
             id="docs-subnav"
             className="bg-white z-50 px-4 w-full h-12 shadow text-gray-60 text-12 md:text-14 transition duration-300 ease-out group-[.nav-disappear]:-translate-y-16 md:group-[.nav-disappear]:transform-none">
             <div
-              className="pl-30 flex gap-6 md:gap-6 lg:gap-10 items-center h-full w-full max-w-1280 m-auto">
+              className="pl-30 flex gap-6 lg:gap-10 items-center h-full w-full max-w-1280 m-auto">
               <Link
                 href={`/docs/manual/${version}/introduction`}
                 className={isActiveLink(~includes="/docs/manual/", ~excludes="/api", ~route)}>

From d93e89481fe85e90c815de1c02c170af1b1079cf Mon Sep 17 00:00:00 2001
From: Josh Derocher-Vlk <60623931+jderochervlk@users.noreply.github.com>
Date: Wed, 7 May 2025 15:08:19 +0200
Subject: [PATCH 11/15] Update SidebarLayout.res

---
 src/layouts/SidebarLayout.res | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/layouts/SidebarLayout.res b/src/layouts/SidebarLayout.res
index 03b952ca6..7a1eb86d4 100644
--- a/src/layouts/SidebarLayout.res
+++ b/src/layouts/SidebarLayout.res
@@ -146,6 +146,7 @@ module Sidebar = {
           <div className="flex justify-between">
             <div className="w-3/4 md:w-full"> toplevelNav </div>
             <button
+              style={{ marginTop: "112px" }}
               onClick={evt => {
                 ReactEvent.Mouse.preventDefault(evt)
                 toggle()

From 1a0a06f4d0dc2164b77e6b3bdba7bd90567bfed0 Mon Sep 17 00:00:00 2001
From: Josh Derocher-Vlk <60623931+jderochervlk@users.noreply.github.com>
Date: Wed, 7 May 2025 15:13:49 +0200
Subject: [PATCH 12/15] Update SidebarLayout.res

---
 src/layouts/SidebarLayout.res | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/layouts/SidebarLayout.res b/src/layouts/SidebarLayout.res
index 7a1eb86d4..74aad9f5e 100644
--- a/src/layouts/SidebarLayout.res
+++ b/src/layouts/SidebarLayout.res
@@ -146,7 +146,7 @@ module Sidebar = {
           <div className="flex justify-between">
             <div className="w-3/4 md:w-full"> toplevelNav </div>
             <button
-              style={{ marginTop: "112px" }}
+              style={{ paddingTop: "42px" }}
               onClick={evt => {
                 ReactEvent.Mouse.preventDefault(evt)
                 toggle()

From e834f12fc175f4a74e3ebbaa174da8c535c940ea Mon Sep 17 00:00:00 2001
From: Josh Derocher-Vlk <60623931+jderochervlk@users.noreply.github.com>
Date: Wed, 7 May 2025 15:19:05 +0200
Subject: [PATCH 13/15] Update SidebarLayout.res

---
 src/layouts/SidebarLayout.res | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/layouts/SidebarLayout.res b/src/layouts/SidebarLayout.res
index 74aad9f5e..9ed5ec557 100644
--- a/src/layouts/SidebarLayout.res
+++ b/src/layouts/SidebarLayout.res
@@ -146,7 +146,7 @@ module Sidebar = {
           <div className="flex justify-between">
             <div className="w-3/4 md:w-full"> toplevelNav </div>
             <button
-              style={{ paddingTop: "42px" }}
+              style={{ paddingTop: "54px" }}
               onClick={evt => {
                 ReactEvent.Mouse.preventDefault(evt)
                 toggle()

From 9bc434e2b5e0ab73e998e2bd26987cf2eb847730 Mon Sep 17 00:00:00 2001
From: Josh Derocher-Vlk <60623931+jderochervlk@users.noreply.github.com>
Date: Wed, 7 May 2025 18:52:07 +0200
Subject: [PATCH 14/15] Update SidebarLayout.res

---
 src/layouts/SidebarLayout.res | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/layouts/SidebarLayout.res b/src/layouts/SidebarLayout.res
index 9ed5ec557..4d7e6b59d 100644
--- a/src/layouts/SidebarLayout.res
+++ b/src/layouts/SidebarLayout.res
@@ -146,7 +146,7 @@ module Sidebar = {
           <div className="flex justify-between">
             <div className="w-3/4 md:w-full"> toplevelNav </div>
             <button
-              style={{ paddingTop: "54px" }}
+              style={{ paddingTop: "72px" }}
               onClick={evt => {
                 ReactEvent.Mouse.preventDefault(evt)
                 toggle()

From b3b68092bb26092e92de46cb67203c72ca66054a Mon Sep 17 00:00:00 2001
From: Florian Hammerschmidt <fh@cca.io>
Date: Thu, 8 May 2025 10:46:04 +0200
Subject: [PATCH 15/15] Run format

---
 src/layouts/SidebarLayout.res | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/layouts/SidebarLayout.res b/src/layouts/SidebarLayout.res
index 4d7e6b59d..96fc3e69c 100644
--- a/src/layouts/SidebarLayout.res
+++ b/src/layouts/SidebarLayout.res
@@ -146,7 +146,7 @@ module Sidebar = {
           <div className="flex justify-between">
             <div className="w-3/4 md:w-full"> toplevelNav </div>
             <button
-              style={{ paddingTop: "72px" }}
+              style={{paddingTop: "72px"}}
               onClick={evt => {
                 ReactEvent.Mouse.preventDefault(evt)
                 toggle()