Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Vlk sidebar desktop #1036

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
May 9, 2025
Merged

Vlk sidebar desktop #1036

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
89c3801
Cleanup nav style and add back nav collapse on mobile
jderochervlk May 9, 2025
b314d9d
fix sidebar top margin on desktop
jderochervlk May 9, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 19 additions & 0 deletions src/common/EnableCollapsibleNavbar.res
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
/**
* Hides the navbar when scrolling down on mobile, and causes it to reappear when scrolling back up.
*/
@jsx.component
let make = (~children, ~isEnabled) => {
let scrollDir = Hooks.useScrollDirection()
if isEnabled {
<div
className={switch scrollDir {
| Up(_) => "group nav-appear"

| Down(_) => "group nav-disappear"
}}>
children
</div>
} else {
children
}
}
8 changes: 5 additions & 3 deletions src/components/Navigation.res
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ module MobileNav = {
}
}

/* isOverlayOpen: if the mobile overlay is toggled open */
/* isOverlayOpen: if the mobile sidebar is toggled open */
@react.component
let make = (~fixed=true, ~isOverlayOpen: bool, ~setOverlayOpen: (bool => bool) => unit) => {
let minWidth = "20rem"
Expand All @@ -80,7 +80,9 @@ let make = (~fixed=true, ~isOverlayOpen: bool, ~setOverlayOpen: (bool => bool) =
let url = router.route->Url.parse
let version = url->Url.getVersionString

let toggleOverlay = () => setOverlayOpen(prev => !prev)
let toggleOverlay = () => {
setOverlayOpen(prev => !prev)
}

let fixedNav = fixed ? "fixed top-0" : "relative"

Expand Down Expand Up @@ -169,7 +171,7 @@ let make = (~fixed=true, ~isOverlayOpen: bool, ~setOverlayOpen: (bool => bool) =
{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">
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-32 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
Expand Down
83 changes: 44 additions & 39 deletions src/layouts/SidebarLayout.res
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -138,22 +138,21 @@ module Sidebar = {
id="sidebar"
className={(
isOpen ? "fixed w-full left-0 h-full z-20 min-w-320" : "hidden "
) ++ " 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"}>
) ++ " 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 mt-28 md:mt-0"}>
<aside
id="sidebar-content"
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", ())}>
<button
onClick={evt => {
ReactEvent.Mouse.preventDefault(evt)
toggle()
}}
className="md:hidden h-16 flex pt-2 right-4 absolute">
<Icon.Close />
</button>
<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()
}}
className="md:hidden h-16">
<Icon.Close />
</button>
</div>
preludeSection
/* Firefox ignores padding in scroll containers, so we need margin
Expand Down Expand Up @@ -202,7 +201,7 @@ module BreadCrumbs = {
module MobileDrawerButton = {
@react.component
let make = (~hidden: bool, ~onClick) =>
<button className={(hidden ? "hidden" : "") ++ " md:hidden mr-3"} onMouseDown=onClick>
<button className={(hidden ? "hidden " : "") ++ "md:hidden mr-3"} onMouseDown=onClick>
<img className="h-4" src="/static/ic_sidebar_drawer.svg" />
</button>
}
Expand All @@ -222,6 +221,7 @@ let make = (
~children,
) => {
let (isNavOpen, setNavOpen) = React.useState(() => false)

let router = Next.Router.useRouter()
let version = Url.parse(router.route).version

Expand All @@ -234,8 +234,11 @@ let make = (

let breadcrumbs = breadcrumbs->Option.mapOr(React.null, crumbs => <BreadCrumbs crumbs />)

let (_isSidebarOpen, setSidebarOpen) = sidebarState
let toggleSidebar = () => setSidebarOpen(prev => !prev)
let (isSidebarOpen, setSidebarOpen) = sidebarState

let toggleSidebar = () => {
setSidebarOpen(prev => !prev)
}

React.useEffect(() => {
open Next.Router.Events
Expand Down Expand Up @@ -304,36 +307,38 @@ let make = (

<>
<Meta title=metaTitle version />
<div className={"mt-16 min-w-320 " ++ theme}>
<div className="w-full">
<Navigation isOverlayOpen=isNavOpen setOverlayOpen=setNavOpen />
<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-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-[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} />
<EnableCollapsibleNavbar isEnabled={!isSidebarOpen && !isNavOpen}>
<div className={"mt-16 min-w-320 " ++ theme}>
<div className="w-full">
<Navigation isOverlayOpen=isNavOpen setOverlayOpen=setNavOpen />
<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-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="truncate overflow-x-auto touch-scroll flex items-center space-x-4 md:justify-between mr-4 w-full">
breadcrumbs
editLinkEl
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-64 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">
breadcrumbs
editLinkEl
</div>
</div>
</div>
<div className={hasBreadcrumbs ? "mt-10" : "mt-6 md:-mt-4"}>
<MdxProvider components> children </MdxProvider>
</div>
pagination
</main>
{switch rightSidebar {
| Some(ele) => ele
| None => React.null
}}
<div className={hasBreadcrumbs ? "mt-10" : "mt-6 md:-mt-4"}>
<MdxProvider components> children </MdxProvider>
</div>
pagination
</main>
{switch rightSidebar {
| Some(ele) => ele
| None => React.null
}}
</div>
</div>
</div>
<Footer />
</div>
<Footer />
</div>
</EnableCollapsibleNavbar>
</>
}