Skip to content

Add sidebar navigation to introduction page #870

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

Merged
merged 12 commits into from
Aug 8, 2025

Conversation

javiert-okta
Copy link
Contributor

@javiert-okta javiert-okta commented Aug 4, 2025

This PR adds a sidebar navigation to the introduction page with the following features:

  • Sidebar with each heading and styling for active state:
image image
  • Clicking on a section automatically navigates to it
  • Each heading now has an id so that it can be accessed via url:

https://next-jwt-8ftcynofz-okta-3f38a12f.vercel.app/introduction#how-json-web-tokens-work

  • The same ids have been used for japanese version
  • The design is responsive, and the sidebar will disappear if the screen is too small.
image

Copy link

github-actions bot commented Aug 4, 2025

Copy link

github-actions bot commented Aug 5, 2025

@christiansamaniego-okta
Copy link
Contributor

christiansamaniego-okta commented Aug 6, 2025

There seems to be some issues with the first sections:

  • When scrolling to the second section and then scrolling back to the first section it doesn't update the active state on the sidebar for the first section.
  • When scrolling to the third section and scrolling back to the second one, it doesn't update the active state on the sidebar for the second section.

Maybe it could be fixed by using different values for threshold and rootMargin in the IntersectionObserver. 🤔

Screen.Recording.2025-08-06.at.12.59.17.PM.mov

@javiert-okta
Copy link
Contributor Author

Looks like we can move around the value for rootMargin to fix that. Thanks @christiansamaniego-okta !

Copy link

github-actions bot commented Aug 7, 2025

Copy link
Contributor

@christiansamaniego-okta christiansamaniego-okta left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you for addressing the previous issue @javiert-okta. Looks awesome!
Nit pick: A couple very minor things I'll leave as optional:

  • Make the divider match the color of the divider at the top of the page (below the "Introduction to JSON Web Tokens" heading)
  • Adding some margin at the bottom so that the divider doesn't touch the component at the bottom

Copy link

github-actions bot commented Aug 8, 2025

@javiert-okta
Copy link
Contributor Author

Nice suggestions @christiansamaniego-okta. I addressed both of them, take a look.

Copy link
Contributor

@christiansamaniego-okta christiansamaniego-okta left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM! Good job!

@javiert-okta javiert-okta merged commit 72cf3f6 into master Aug 8, 2025
4 checks passed
@javiert-okta javiert-okta deleted the update-introduction-page branch August 8, 2025 17:52
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.

2 participants