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 d75624361..48bfb3863 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,16 +8,28 @@ 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) => {
- 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)}>
@@ -73,98 +85,117 @@ 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 text-gray-40"
+ style={ReactDOMStyle.make(~maxWidth="26rem", ())}>
+ <Link
+ href={`/docs/manual/${version}/introduction`} className={isDocRouteActive(~route)}>
+ {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 text-gray-60">
+ <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>
+ // This is a subnav for documentation pages
+ {isDocRoute(~route)
+ ? <nav
+ 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 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)}>
+ {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..96fc3e69c 100644
--- a/src/layouts/SidebarLayout.res
+++ b/src/layouts/SidebarLayout.res
@@ -138,14 +138,15 @@ 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>
<button
+ style={{paddingTop: "72px"}}
onClick={evt => {
ReactEvent.Mouse.preventDefault(evt)
toggle()
@@ -309,10 +310,10 @@ 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"}>
+ 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">
@@ -320,7 +321,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