fix sidebar top padding

Author: jderochervlk

app/routes/MdxRoute.res

@@ -308,7 +308,7 @@ let default = () => {
           breadcrumbs=?loaderData.breadcrumbs
           editHref={`https://github.com/rescript-lang/rescript-lang.org/blob/master${loaderData.filePath->Option.getOrThrow}`}
         >
-          <div className="markdown-body pt-20 md:pt-0"> {component()} </div>
+          <div className="markdown-body"> {component()} </div>
         </DocsLayout>
       </>
     } else if (pathname :> string)->String.includes("community") {

src/ApiDocs.res

@@ -196,25 +196,25 @@ module SidebarTree = {
       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 h-auto md:relative overflow-y-visible bg-white mt-28 md:mt-0"}
+      ) ++ " md:block md:w-48 md:-ml-4 lg:w-1/5 h-auto md:relative overflow-y-visible bg-white mt-16 md:mt-0"}
     >
       <aside
         id="sidebar-content-api-docs"
         className="w-80 h-full relative top-12 px-4 w-full block md:top-28 md:sticky border-r border-gray-20 overflow-y-auto pb-24 max-h-[calc(100vh-7rem)]"
       >
-        <div className="flex justify-between">
-          <div className="w-3/4 md:w-full"> React.null </div>
+        <div className="flex justify-between items-center">
+          {preludeSection}
           <button
             onClick={evt => {
               ReactEvent.Mouse.preventDefault(evt)
               toggle()
             }}
-            className="md:hidden h-16"
+            className="md:hidden h-auto"
           >
             <Icon.Close />
           </button>
         </div>
-        {preludeSection}
+
         <div className="my-10">
           <div className="hl-overline block text-gray-80 mt-5 mb-2" dataTestId="overview">
             {"Overview"->React.string}

src/components/Icon.res

@@ -159,7 +159,7 @@ module Table = {
 module Close = {
   @react.component
   let make = (~className: string="") =>
-    <svg className={"fill-current " ++ className} width="12.728" height="12.728">
+    <svg className={"fill-current " ++ className} width="16" height="16">
       <path d="M12.728 11.313l-1.414 1.414L0 1.414 1.414-.001z" />
       <path d="M11.314 0l1.414 1.414L1.415 12.728 0 11.314z" />
     </svg>

src/components/VersionSelect.res

@@ -28,7 +28,7 @@ let make = () => {
       {React.string(ver.label)}
     </a>
   })
-  <div className="wrapper mt-4 block w-full" dataTestId="version-select">
+  <div className="wrapper block w-full" dataTestId="version-select">
     <div id="older-versions" popover=Auto />
     <button
       className="trigger text-12 border border-gray-20 bg-gray-10 text-gray-80 inline-block rounded px-4 py-1 font-semibold whitespace-nowrap"

src/layouts/SidebarLayout.res

@@ -132,6 +132,23 @@ module Sidebar = {
   ) => {
     let isItemActive = (navItem: NavItem.t) => navItem.href === (route :> string)
 
+    // the height of the navbars above is fluid across pages, and it's easy to get it wrong
+    // so we calculate it dynamically here
+    let sidebarTopOffset = isOpen
+      ? {
+          let mobileNavbarHeight =
+            Nullable.make(document->WebAPI.Document.getElementById("mobile-navbar"))
+            ->Nullable.map(el => el.clientHeight)
+            ->Nullable.getOr(0)
+          let docNavbarHeight =
+            Nullable.make(document->WebAPI.Document.getElementById("doc-navbar"))
+            ->Nullable.map(el => el.clientHeight)
+            ->Nullable.getOr(0)
+
+          mobileNavbarHeight + docNavbarHeight + 8
+        }
+      : 0
+
     let getActiveToc = (navItem: NavItem.t) => {
       if navItem.href === (route :> string) {
         activeToc
@@ -142,10 +159,13 @@ module Sidebar = {
 
     <>
       <div
+        style={{
+          paddingTop: `${sidebarTopOffset->Int.toString}px`,
+        }}
         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 h-auto md:relative overflow-y-visible mt-10 pt-2 bg-white md:mt-0 min-w-48"}
+        ) ++ " md:block md:w-48 md:-ml-4 lg:w-1/5 h-auto md:relative overflow-y-visible pt-2 bg-white md:mt-0 min-w-48"}
       >
         <aside
           id="sidebar-content"
@@ -351,7 +371,7 @@ let make = (
               </div>
             </div>
             <div
-              className={hasBreadcrumbs ? "mt-20 md:mt-10" : "mt-6 md:-mt-4"}
+              className={hasBreadcrumbs ? "mt-28 md:mt-10" : "mt-6 md:-mt-4"}
               dataTestId="side-layout-children"
             >
               children