"Learn" pages sidebar scrolls back to top on every page change
URL:
Any page on https://beta-node-js-org.vercel.app/en/learn/
Browser Name:
Arc / Chrome
Browser Version:
122.0.6261.94 / 124.0.6334.0
Operating System:
MacOS Sonoma 14.3 / ArchLinux
How to reproduce the issue:
- Go to any page on the "learn" section of the website.
- Scroll at the bottom of the sidebar and click on any link.
- The page should render correctly, but will reset the scroll position of the sidebar.
Tried taking a quick look at the code, it looks like it could be due to [locale]/[[..path]] routing.
This issue looks very similar to this - it looks like every layout should have a unique key, which would reproduce the app router's built-in layout behavior.
Our students at https://labs.codeday.org will be taking a look at this issue (their first introduction to open source) :)
Collaborator guide may be of interest to you and yours students, it explains a lot about the infrastructure aspect of the project
FYI This is how we fixed this issue in the original redesign project
https://github.com/nodejs/nodejs.dev/pull/963
@manishprivet there an "cool" ways to handle this problème it's to put navbar on layout.tsx. it's allow to not re-render the navBar.
On the example each item is a link so each time there are a click it's change url
https://github.com/nodejs/nodejs.org/assets/97875033/89a90331-a1f8-49b5-8e9b-6fec39da79e2
Agreed there @AugustinMauroy... one of the benefits of using Next <3
But we still need to add a scroll down logic for fresh page renders IMO
Hey everyone, I'm part of the student group from CodeDay that was assigned this issue. The group includes Brian Van Der Sand, Jia Yang, and Steven Buks. We are all working to help solve this issue.
Hi @Brianv707, good luck with this! I genuinely hope you'll enjoy contributing on this project, open source is amazing!
I want to work on this if it's okay with @Brianv707 and his group.
Thanks for your interest. We don't assign tickets if we can help it. Feel free to submit a pull request if you have time. Reference 🍪 https://www.redhat.com/en/blog/dont-lick-cookie