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

"Learn" pages sidebar scrolls back to top on every page change #6409

Open
busybox11 opened this issue Mar 3, 2024 · 9 comments · May be fixed by #6675
Open

"Learn" pages sidebar scrolls back to top on every page change #6409

busybox11 opened this issue Mar 3, 2024 · 9 comments · May be fixed by #6675
Labels
bug good first issue Issues for newcomers help wanted website redesign Issue/PR part of the Node.js Website Redesign

Comments

@busybox11
Copy link

busybox11 commented Mar 3, 2024

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.

@busybox11 busybox11 added the bug label Mar 3, 2024
@ovflowd ovflowd added help wanted good first issue Issues for newcomers website redesign Issue/PR part of the Node.js Website Redesign labels Mar 3, 2024
@ShubhamPatilsd
Copy link

Our students at https://labs.codeday.org will be taking a look at this issue (their first introduction to open source) :)

@AugustinMauroy
Copy link
Contributor

Collaborator guide may be of interest to you and yours students, it explains a lot about the infrastructure aspect of the project

@manishprivet
Copy link
Member

FYI This is how we fixed this issue in the original redesign project

nodejs/nodejs.dev#963

@AugustinMauroy
Copy link
Contributor

AugustinMauroy commented Mar 5, 2024

@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

Enregistrement.de.l.ecran.2024-03-05.a.13.35.57.mov

@manishprivet
Copy link
Member

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

@Brianv707
Copy link

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.

@busybox11
Copy link
Author

Hi @Brianv707, good luck with this! I genuinely hope you'll enjoy contributing on this project, open source is amazing!

@abizek
Copy link

abizek commented Apr 5, 2024

I want to work on this if it's okay with @Brianv707 and his group.

@bmuenzenmeyer
Copy link
Collaborator

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

@ovflowd ovflowd linked a pull request Apr 26, 2024 that will close this issue
abizek added a commit to abizek/nodejs.org that referenced this issue May 4, 2024
Temporary workaround for nodejs#6409
Get more info here - nodejs#6675

Signed-off-by: abizek <abishekilango@protonmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug good first issue Issues for newcomers help wanted website redesign Issue/PR part of the Node.js Website Redesign
Projects
None yet
8 participants