Skip to content

Commit

Permalink
share collapsible navbar to layouts (docs, api, blog)
Browse files Browse the repository at this point in the history
  • Loading branch information
cometkim committed Apr 21, 2024
1 parent 6cb18fb commit 53d3fb8
Show file tree
Hide file tree
Showing 9 changed files with 61 additions and 33 deletions.
1 change: 1 addition & 0 deletions src/ApiDocs.res
Original file line number Diff line number Diff line change
Expand Up @@ -374,6 +374,7 @@ let default = (props: props) => {
metaTitle={title ++ " | ReScript API"}
theme=#Reason
components=ApiMarkdown.default
navbarCollapsible=true
sidebarState=(isSidebarOpen, setSidebarOpen)
sidebar
rightSidebar>
Expand Down
2 changes: 1 addition & 1 deletion src/BlogArticle.res
Original file line number Diff line number Diff line change
Expand Up @@ -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 => {
Expand Down
35 changes: 35 additions & 0 deletions src/common/ScrollDirectionHook.res
Original file line number Diff line number Diff line change
@@ -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
}
1 change: 1 addition & 0 deletions src/layouts/ApiLayout.res
Original file line number Diff line number Diff line change
Expand Up @@ -133,6 +133,7 @@ let make = (
metaTitle={pageTitle ++ " | ReScript API"}
theme=#Reason
components
navbarCollapsible=true
sidebarState=(isSidebarOpen, setSidebarOpen)
sidebar>
children
Expand Down
1 change: 1 addition & 0 deletions src/layouts/DocsLayout.res
Original file line number Diff line number Diff line change
Expand Up @@ -152,6 +152,7 @@ let make = (
metaTitle
theme
components
navbarCollapsible=true
sidebarState=(isSidebarOpen, setSidebarOpen)
sidebar
categories
Expand Down
11 changes: 9 additions & 2 deletions src/layouts/MainLayout.res
Original file line number Diff line number Diff line change
@@ -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">
Expand Down
6 changes: 5 additions & 1 deletion src/layouts/MainLayout.resi
Original file line number Diff line number Diff line change
@@ -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
36 changes: 7 additions & 29 deletions src/layouts/SidebarLayout.res
Original file line number Diff line number Diff line change
Expand Up @@ -206,10 +206,6 @@ module MobileDrawerButton = {
</button>
}

type scrollDir =
| Up({scrollY: int})
| Down({scrollY: int})

@react.component
let make = (
~metaTitle: string,
Expand All @@ -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

Expand Down Expand Up @@ -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()
Expand Down Expand Up @@ -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">
Expand Down
1 change: 1 addition & 0 deletions src/layouts/SidebarLayout.resi
Original file line number Diff line number Diff line change
Expand Up @@ -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

0 comments on commit 53d3fb8

Please sign in to comment.