functionality is done

Author: jderochervlk

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>

src/components/Navigation.res

@@ -1,17 +1,29 @@
 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
 
 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>
   </>
 }

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"}>