share collapsible navbar to layouts (docs, api, blog)

Author: cometkim

src/ApiDocs.res

@@ -374,6 +374,7 @@ let default = (props: props) => {
     metaTitle={title ++ " | ReScript API"}
     theme=#Reason
     components=ApiMarkdown.default
+    navbarCollapsible=true
     sidebarState=(isSidebarOpen, setSidebarOpen)
     sidebar
     rightSidebar>

src/BlogArticle.res

@@ -199,7 +199,7 @@ let default = (props: props) => {
       </Markdown.Warn>
     </div>
   }
-  <MainLayout> content </MainLayout>
+  <MainLayout navbarCollapsible=true> content </MainLayout>
 }
 
 let getStaticProps: Next.GetStaticProps.t<props, Params.t> = async ctx => {

src/common/ScrollDirectionHook.res

@@ -0,0 +1,35 @@
+/** scrollDir is not memo-friendly.
+  It must be used with pattern matching.
+  Do not pass it directly to child components. */
+type scrollDir =
+  | Up({scrollY: int})
+  | Down({scrollY: int})
+
+/**
+  This will cause highly frequent events, so use it only once in a root as possible.
+  And split the children components to prevent heavy ones from being re-rendered unnecessarily. */
+let useScrollDirection = () => {
+  let (_, startScrollEventTransition) = React.useTransition()
+  let (scrollDir, setScrollDir) = React.useState(() => Up({scrollY: %raw(`Infinity`)}))
+
+  React.useEffect(() => {
+    let onScroll = _e => {
+      startScrollEventTransition(() => {
+        setScrollDir(
+          prev => {
+            let Up({scrollY}) | Down({scrollY}) = prev
+            if scrollY === 0 || scrollY > Webapi.Window.scrollY {
+              Up({scrollY: Webapi.Window.scrollY})
+            } else {
+              Down({scrollY: Webapi.Window.scrollY})
+            }
+          },
+        )
+      })
+    }
+    Webapi.Window.addEventListener("scroll", onScroll)
+    Some(() => Webapi.Window.removeEventListener("scroll", onScroll))
+  }, [])
+
+  scrollDir
+}

src/layouts/ApiLayout.res

@@ -133,6 +133,7 @@ let make = (
     metaTitle={pageTitle ++ " | ReScript API"}
     theme=#Reason
     components
+    navbarCollapsible=true
     sidebarState=(isSidebarOpen, setSidebarOpen)
     sidebar>
     children

src/layouts/DocsLayout.res

@@ -152,6 +152,7 @@ let make = (
     metaTitle
     theme
     components
+    navbarCollapsible=true
     sidebarState=(isSidebarOpen, setSidebarOpen)
     sidebar
     categories

src/layouts/MainLayout.res

@@ -1,9 +1,16 @@
 @react.component
-let make = (~components=MarkdownComponents.default, ~children) => {
+let make = (~components=MarkdownComponents.default, ~navbarCollapsible=false, ~children) => {
   let (isOverlayOpen, setOverlayOpen) = React.useState(() => false)
+  let scrollDir = ScrollDirectionHook.useScrollDirection()
+
+  let navAppearanceCascading = switch (navbarCollapsible, scrollDir) {
+  | (true, Up(_)) => " group nav-appear"
+  | (true, Down(_)) => " group nav-disappear"
+  | _ => ""
+  }
 
   <>
-    <div className="mt-4 xs:mt-16">
+    <div className={"mt-4 xs:mt-16" ++ navAppearanceCascading}>
       <div className="text-gray-80">
         <Navigation isOverlayOpen setOverlayOpen />
         <div className="flex xs:justify-center overflow-hidden pb-48">

src/layouts/MainLayout.resi

@@ -1,2 +1,6 @@
 @react.component
-let make: (~components: MarkdownComponents.t=?, ~children: React.element) => React.element
+let make: (
+  ~components: MarkdownComponents.t=?,
+  ~navbarCollapsible: bool=?,
+  ~children: React.element,
+) => React.element

src/layouts/SidebarLayout.res

@@ -206,10 +206,6 @@ module MobileDrawerButton = {
     </button>
 }
 
-type scrollDir =
-  | Up({scrollY: int})
-  | Down({scrollY: int})
-
 @react.component
 let make = (
   ~metaTitle: string,
@@ -222,11 +218,11 @@ let make = (
   ~rightSidebar: option<React.element>=?,
   ~categories: option<array<Sidebar.Category.t>>=?,
   ~breadcrumbs: option<list<Url.breadcrumb>>=?,
+  ~navbarCollapsible=false,
   ~children,
 ) => {
   let (isNavOpen, setNavOpen) = React.useState(() => false)
-  let (_, startScrollEventTransition) = React.useTransition()
-  let (scrollDir, setScrollDir) = React.useState(() => Up({scrollY: %raw(`Infinity`)}))
+  let scrollDir = ScrollDirectionHook.useScrollDirection()
   let router = Next.Router.useRouter()
   let version = Url.parse(router.route).version
 
@@ -260,25 +256,6 @@ let make = (
     )
   }, [])
 
-  React.useEffect(() => {
-    let onScroll = _e => {
-      startScrollEventTransition(() => {
-        setScrollDir(
-          prev => {
-            let Up({scrollY}) | Down({scrollY}) = prev
-            if scrollY === 0 || scrollY > Webapi.Window.scrollY {
-              Up({scrollY: Webapi.Window.scrollY})
-            } else {
-              Down({scrollY: Webapi.Window.scrollY})
-            }
-          },
-        )
-      })
-    }
-    Webapi.Window.addEventListener("scroll", onScroll)
-    Some(() => Webapi.Window.removeEventListener("scroll", onScroll))
-  }, [])
-
   let handleDrawerButtonClick = React.useCallback(evt => {
     ReactEvent.Mouse.preventDefault(evt)
     toggleSidebar()
@@ -327,14 +304,15 @@ let make = (
   | None => React.null
   }
 
-  let navAppearanceCascading = switch scrollDir {
-  | Up(_) => "nav-appear"
-  | Down(_) => "nav-disappear"
+  let navAppearanceCascading = switch (navbarCollapsible, scrollDir) {
+  | (true, Up(_)) => " group nav-appear"
+  | (true, Down(_)) => " group nav-disappear"
+  | _ => ""
   }
 
   <>
     <Meta title=metaTitle version />
-    <div className={"mt-16 min-w-320 " ++ theme ++ " group " ++ navAppearanceCascading}>
+    <div className={"mt-16 min-w-320 " ++ theme ++ navAppearanceCascading}>
       <div className="w-full">
         <Navigation isOverlayOpen=isNavOpen setOverlayOpen=setNavOpen />
         <div className="flex lg:justify-center">

src/layouts/SidebarLayout.resi

@@ -73,5 +73,6 @@ let make: (
   ~rightSidebar: React.element=?,
   ~categories: array<Sidebar.Category.t>=?,
   ~breadcrumbs: list<Url.breadcrumb>=?,
+  ~navbarCollapsible: bool=?,
   ~children: React.element,
 ) => React.element