Skip to content

Fix Wrong Page Underlined as Current Page in Left Nav Bar#1391

Open
esu-skoopin wants to merge 15 commits into
processing:mainfrom
esu-skoopin:fix/ISSUE-1340-fix-visual-bug-in-left-nav-bar
Open

Fix Wrong Page Underlined as Current Page in Left Nav Bar#1391
esu-skoopin wants to merge 15 commits into
processing:mainfrom
esu-skoopin:fix/ISSUE-1340-fix-visual-bug-in-left-nav-bar

Conversation

@esu-skoopin

Copy link
Copy Markdown

Resolves #1304

Perceived Cause Behind Bug

The main issue, as far as we know, is the combination of a build configuration that allows for the site to be built concurrently two pages at a time and the use of the global variable, jumpToState.


This is the relevant build setting:

// Code location: astro.config.mjs

build: {
  format: "directory",
  concurrency: 2
},

We can take a simulated look at what's happening to better understand the problem:

Step What Happens Page Associated with jumpToState
0 Pages A and B are being built at the same time
1 Set jumpToState for page A A
2 Set jumpToState for page B B
3 Read from jumpToState for page A B
4 Read from jumpToState for page B B

Because the site is being built concurrently two pages at a time, it's possible for jumpToState to be overwritten by page B before page A can read from jumpToState.


This can result in the visual bug, as seen below.

Screenshot of 'Linear Interpolation' example page, showcasing visual bug in left nav bar
Current page incorrectly underlined as "Map"
Screenshot of 'Map' example page
Current page correctly underlined as "Map"

*The assumption is that these pages were built concurrently at build time and "Map" overwrote jumpToState before "Linear Interpolation" could read from it


Our Solution

For our solution, we didn't want to simply change the build config for the site, as we believe that this config setting was most likely put in place for a good reason, so we instead decided to replace the use of the global jumpToState variable with a "jumpToState" prop for the <BaseLayout> and <Nav> components.


Old Approach New Approach
Set global jumpToState variable

Global jumpToState variable potentially gets overwritten by another page

<Nav jumpToState={global jumpToState variable}>
<BaseLayout jumpToState={page}>

<Nav jumpToState={page}>

Screenshots of our solution working as expected locally:

  • "Linear Interpolation" page
Screenshot of local instance of 'Linear Interpolation' example page

 

  • "Variables and Change" page
Screenshot of local instance of 'Variables and Change' tutorial page

 

Feedback welcome!

esu-skoopin and others added 14 commits April 29, 2026 16:18
…yout>, rather than use global "jumpToState" variable
…site

Accidentally set "heading" prop for "jumpToState" prop for <BaseLayout> for both in previous commits; fixed that in this commit
@Nwakaego-Ego

Copy link
Copy Markdown
Collaborator

Hi @esu-skoopin thank you for this PR. I tested locally and can confirm the fix works correctly.
cc @ksen0 @doradocodes

@esu-skoopin

Copy link
Copy Markdown
Author

@lirenjie95 Would you happen to be able to review this PR? I believe the changes I've made for this PR are very similar to PR #1271 which you reviewed a month ago.

@lirenjie95 lirenjie95 left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

This is a cleaner and more robust approach than #1271—eliminating the shared mutable state entirely instead of working around it. I also believe this will resolve #1207, since the cross-locale "Jump to" leakage was caused by the same jumpToState race condition. One more thing, please squash and merge to keep the commit history tidy. Thanks for the great work!

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.

Incorrect information in detailed left side navigation styling

5 participants