Hide top nav on reading docs on mobile

The top navigation disappears when you scroll down and reappears when you scroll up.
Like browsers, and many content services like Medium,

This is a necessary feature for mobile readers with a small viewport.

Also made some code changes here to add memoization,
because the scroll event is highly frequant.

`React.useState` preserves the reference of the set dispatcher, but doesn't for the surrounding tuple.
Adding a few memo, most children, except for components that are cheap to render, are not re-rendered.

Also no deep re-render, the appearance state is propagated via old good CSS cascading rather than React state.

Author: cometkim

src/Blog.res

@@ -289,7 +289,7 @@ let default = (props: props): React.element => {
     </>
   }
 
-  let overlayState = React.useState(() => false)
+  let (isOverlayOpen, setOverlayOpen) = React.useState(() => false)
   let title = "Blog | ReScript Documentation"
 
   <>
@@ -298,7 +298,7 @@ let default = (props: props): React.element => {
     />
     <div className="mt-16 pt-2">
       <div className="text-gray-80 text-18">
-        <Navigation overlayState />
+        <Navigation isOverlayOpen setOverlayOpen />
         <div className="flex justify-center overflow-hidden">
           <main className="min-w-320 lg:align-center w-full lg:px-0 max-w-1280 pb-48">
             <MdxProvider components=MarkdownComponents.default>

src/Packages.res

@@ -328,8 +328,8 @@ type state =
 
 let scrollToTop: unit => unit = %raw(`function() {
   window.scroll({
-    top: 0, 
-    left: 0, 
+    top: 0,
+    left: 0,
     behavior: 'smooth'
   });
 }
@@ -462,7 +462,7 @@ let default = (props: props) => {
     None
   }, [state])
 
-  let overlayState = React.useState(() => false)
+  let (isOverlayOpen, setOverlayOpen) = React.useState(() => false)
   <>
     <Meta
       siteName="ReScript Packages"
@@ -471,7 +471,7 @@ let default = (props: props) => {
     />
     <div className="mt-16 pt-2">
       <div className="text-gray-80 text-18">
-        <Navigation overlayState />
+        <Navigation isOverlayOpen setOverlayOpen />
         <div className="flex overflow-hidden">
           <div
             className="flex justify-between min-w-320 px-4 pt-16 lg:align-center w-full lg:px-8 pb-48">

src/SyntaxLookup.res

@@ -336,7 +336,7 @@ let default = (props: props) => {
     onSearchValueChange("")
   }
 
-  let overlayState = React.useState(() => false)
+  let (isOverlayOpen, setOverlayOpen) = React.useState(() => false)
   let title = "Syntax Lookup | ReScript Documentation"
 
   let content =
@@ -372,7 +372,7 @@ let default = (props: props) => {
     />
     <div className="mt-4 xs:mt-16">
       <div className="text-gray-80">
-        <Navigation overlayState />
+        <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">
             <MdxProvider components=MarkdownComponents.default>

src/Try.res

@@ -1,7 +1,7 @@
 type props = {versions: array<string>}
 
 let default = props => {
-  let overlayState = React.useState(() => false)
+  let (isOverlayOpen, setOverlayOpen) = React.useState(() => false)
 
   let lazyPlayground = Next.Dynamic.dynamic(
     async () => await Js.import(Playground.make),
@@ -20,7 +20,7 @@ let default = props => {
     </Next.Head>
     <div className="text-16">
       <div className="text-gray-40 text-14">
-        <Navigation fixed=false overlayState />
+        <Navigation fixed=false isOverlayOpen setOverlayOpen />
         playground
       </div>
     </div>

src/bindings/Next.res

@@ -63,7 +63,6 @@ module Link = {
     ~children: React.element,
     ~className: string=?,
     ~target: string=?,
-    ~hrefRel: string=?,
   ) => React.element = "default"
 }
 

src/bindings/Next.resi

@@ -63,7 +63,6 @@ module Link: {
     ~children: React.element,
     ~className: string=?,
     ~target: string=?,
-    ~hrefRel: string=?,
   ) => React.element
 }
 

src/bindings/Webapi.res

@@ -37,6 +37,7 @@ module Window = {
   external removeEventListener: (string, 'a => unit) => unit = "removeEventListener"
   @scope("window") @val external innerWidth: int = "innerWidth"
   @scope("window") @val external innerHeight: int = "innerHeight"
+  @scope("window") @val external scrollY: int = "scrollY"
 }
 
 module Fetch = {

src/components/Footer.res

@@ -74,3 +74,5 @@ let make = () => {
     </div>
   </footer>
 }
+
+let make = React.memo(make)

src/components/Markdown.res

@@ -380,11 +380,7 @@ module A = {
       | [pathname] => Js.String2.replaceByRe(pathname, regex, "")
       | _ => href
       }
-      <Next.Link
-        href
-        hrefRel="noopener noreferrer"
-        className="no-underline text-fire hover:underline"
-        ?target>
+      <Next.Link href className="no-underline text-fire hover:underline" ?target>
         children
       </Next.Link>
     }

src/components/Navigation.res

@@ -385,9 +385,9 @@ module MobileNav = {
         /*
          <li className=base>
            <Link href="/community"  className={linkOrActiveLink(~target="/community", ~route)}>
-             
+
                {React.string("Community")}
-             
+
            </Link>
          </li>
  */
@@ -413,7 +413,7 @@ module MobileNav = {
 
 /* isOverlayOpen: if the mobile overlay is toggled open */
 @react.component
-let make = (~fixed=true, ~overlayState: (bool, (bool => bool) => unit)) => {
+let make = (~fixed=true, ~isOverlayOpen: bool, ~setOverlayOpen: (bool => bool) => unit) => {
   let minWidth = "20rem"
   let router = Next.Router.useRouter()
   let route = router.route
@@ -443,8 +443,6 @@ let make = (~fixed=true, ~overlayState: (bool, (bool => bool) => unit)) => {
 
   let isSubnavOpen = Js.Array2.find(collapsibles, c => c.state !== Closed) !== None
 
-  let (isOverlayOpen, setOverlayOpen) = overlayState
-
   let toggleOverlay = () => setOverlayOpen(prev => !prev)
 
   let resetCollapsibles = () =>
@@ -518,7 +516,7 @@ let make = (~fixed=true, ~overlayState: (bool, (bool => bool) => unit)) => {
       ref={ReactDOM.Ref.domRef(navRef)}
       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"}>
+      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
@@ -609,3 +607,5 @@ let make = (~fixed=true, ~overlayState: (bool, (bool => bool) => unit)) => {
     />
   </>
 }
+
+let make = React.memo(make)