refactor: simplify sidebarlayout and removed nested divs

src/components/Navigation.res

@@ -110,7 +110,7 @@ let make = (~fixed=true, ~isOverlayOpen: bool, ~setOverlayOpen: (bool => bool) =
   <>
     <header
       id="header"
-      className={fixedNavClassName ++ " items-center z-50 w-full transition duration-300 ease-out group-[.nav-disappear]:-translate-y-16 md:group-[.nav-disappear]:-translate-y-0 min-w-[20rem]"}
+      className={fixedNavClassName ++ " items-center z-50 w-full transition duration-300 ease-out group-[.nav-disappear]:-translate-y-16 md:group-[.nav-disappear]:translate-y-0 min-w-[20rem]"}
     >
       <nav
         className="px-4 flex xs:justify-center bg-gray-90 shadow h-16 text-white-80 text-14"
@@ -213,7 +213,7 @@ let make = (~fixed=true, ~isOverlayOpen: bool, ~setOverlayOpen: (bool => bool) =
           id="mobile-overlay"
           className={(
             isOverlayOpen ? "flex" : "hidden"
-          ) ++ " top-16 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"}
+          ) ++ " sm:hidden top-16 flex-col fixed 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>
@@ -222,9 +222,11 @@ let make = (~fixed=true, ~isOverlayOpen: bool, ~setOverlayOpen: (bool => bool) =
       {isDocRoute(~route)
         ? <nav
             id="doc-navbar"
-            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-32 md:group-[.nav-disappear]:translate-y-0"
+            className="bg-white z-50 px-4 w-full h-12 shadow text-gray-60 text-11 sm:text-12 md:text-14 transition duration-300 ease-out group-[.nav-disappear]:-translate-y-32 md:group-[.nav-disappear]:translate-y-0"
           >
-            <div className="flex gap-6 lg:gap-10 items-center h-full w-full max-w-1280 m-auto">
+            <div
+              className="overflow-x-scroll flex gap-4 md:gap-6 lg:gap-10 items-center h-full w-full max-w-1280 m-auto"
+            >
               <Link
                 prefetch=#intent
                 to=#"/docs/manual/introduction"

src/layouts/SidebarLayout.res

@@ -79,7 +79,7 @@ module Sidebar = {
         {Array.map(items, m => {
           let hidden = isHidden ? "hidden" : "block"
           let active = isItemActive(m)
-            ? ` bg-fire-5 text-red-500 leading-5 -ml-2 pl-2 font-medium block hover:bg-fire-70 `
+            ? ` bg-fire-5 text-red-500 leading-5 pl-2 font-medium block hover:bg-fire-70 `
             : ""
 
           let activeToc = switch getActiveToc {
@@ -91,7 +91,7 @@ module Sidebar = {
             <Link.String
               to=m.href
               prefetch={#intent}
-              className={"block py-1 md:h-auto tracking-tight text-gray-60 rounded-sm hover:bg-gray-20 hover:-ml-2 hover:py-1 hover:pl-2 " ++
+              className={"block py-1 md:h-auto tracking-tight text-gray-60 rounded-sm hover:bg-gray-20" ++
               active}
             >
               {React.string(m.name)}
@@ -143,23 +143,6 @@ 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
@@ -170,17 +153,14 @@ 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 pt-2 bg-white md:mt-0 min-w-48"}
+          isOpen ? "fixed left-0 h-full z-20 " : "hidden"
+        ) ++ " min-w-3xs max-w-3xs lg:max-w-xs md:block h-auto md:relative overflow-y-visible px-4 md:pl-0 pt-2 bg-white md:mt-0"}
       >
         <aside
           id="sidebar-content"
-          className="h-full relative top-0 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)]"
+          className="h-full relative top-0 block md:top-28 md:sticky border-r border-gray-20 overflow-y-auto pb-24 max-h-[calc(100vh-7rem)] px-4"
         >
           <button
             onClick={evt => {
@@ -366,43 +346,41 @@ let make = (
     }
   | None => React.null
   }
-
-  <div className={"mt-16 min-w-320 " ++ theme}>
-    <div className="w-full">
-      <div className="flex lg:justify-center">
-        <div className="flex w-full max-w-1280 md:mx-10 md:mt-16">
-          sidebar
-          <main className="px-4 w-full pt-4 md:ml-12 lg:mr-8 mb-32 md:max-w-576 lg:max-w-740">
-            //width of the right content part
-            <div
-              id="mobile-navbar"
-              className={`z-10 fixed border-b shadow ${isDocRoute(~route=pathname)
-                  ? "top-28"
-                  : "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-64 md:group-[.nav-disappear]:-translate-y-0 z-25`}
-            >
-              <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"
-              >
-                breadcrumbs
-                editLinkEl
-              </div>
-            </div>
-            <div
-              className={hasBreadcrumbs ? "mt-28 md:mt-10" : "mt-6 md:-mt-4"}
-              dataTestId="side-layout-children"
-            >
-              children
-            </div>
-            pagination
-          </main>
-          {switch rightSidebar {
-          | Some(ele) => ele
-          | None => React.null
-          }}
+  <>
+    <div
+      className={"mt-16 min-w-320 grid max-w-1280 md:mt-32 grid-cols-[auto_minmax(0px,1fr)] pr-4 lg:pr-24 m-auto " ++
+      theme}
+    >
+      sidebar
+      <main className="px-4 md:px-0 md:pt-4 lg:px-4 lg:pl-16 lg:mr-8 mb-32 max-w-svw">
+        // width of the right content part
+        <div
+          id="mobile-navbar"
+          className={`z-10 fixed border-b shadow ${isDocRoute(~route=pathname)
+              ? "top-28"
+              : "top-16"} left-0 pl-4 bg-white w-full py-4 lg:relative lg:border-none lg:shadow-none lg:p-0 lg:top-auto flex items-center transition duration-300 ease-out group-[.nav-disappear]:-translate-y-64 lg:group-[.nav-disappear]:translate-y-0 z-25`}
+        >
+          <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"
+          >
+            breadcrumbs
+            editLinkEl
+          </div>
         </div>
-      </div>
+        <div
+          className={hasBreadcrumbs ? "mt-28 md:mt-10" : "mt-6 md:-mt-4"}
+          dataTestId="side-layout-children"
+        >
+          children
+        </div>
+        pagination
+      </main>
+      {switch rightSidebar {
+      | Some(ele) => ele
+      | None => React.null
+      }}
     </div>
     <Footer />
-  </div>
+  </>
 }