Skip to content
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.

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

Hide top nav on reading docs on mobile #856

Merged
merged 3 commits into from Apr 24, 2024

Conversation

cometkim
Copy link
Contributor

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.

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.
Copy link

vercel bot commented Apr 21, 2024

@cometkim is attempting to deploy a commit to the ReScript Association Team on Vercel.

A member of the Team first needs to authorize it.

@cometkim
Copy link
Contributor Author

Screencast.from.2024-04-21.13-40-11.webm

@fhammerschmidt
Copy link
Collaborator

This works great, nice work!
One nit: does not seem to be implemented on the blog page.

@cometkim
Copy link
Contributor Author

Ah, the original intention was to add it to the blog, not the API docs 😂

@cometkim
Copy link
Contributor Author

cometkim commented Apr 21, 2024

It now works on API, Docs, and Blog articles.

Any other place to need it?

@fhammerschmidt
Copy link
Collaborator

@cometkim
Copy link
Contributor Author

@fhammerschmidt Done. Now it is easily configurable by JSX composition in App.res

(note I've removed some unused codes in Hooks)

@fhammerschmidt fhammerschmidt merged commit 9dcf138 into rescript-association:master Apr 24, 2024
1 of 2 checks passed
@cometkim cometkim deleted the scroll-nav branch April 24, 2024 14:41
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants