Syntax Template, right hand side menu not working

[musashi-garami]

What component (if applicable) Syntax template On this page Nav (right hand side nav)

Describe the bug I noticed in my app using syntax the menu on the right doesn't work properly. (at least I believe so)

I tried the online demo, it behaves the same, if I click on configuring the library, it doesn't highlight.

Same for the last one "Join the Community". (Some links don't highlight, looks like it's not scrolling to the right point)

To Reproduce Steps to reproduce the behavior: Go to Syntax Template DEMO, then on the right, on this page, click configuring library (it does not highlight)/

Expected behavior The nav title highlights when I click it.

Screenshots

Browser/Device (if applicable)

• OS: Windows 11
• Browser: Chrome
• Version: Version 116.0.5845.141 (Official Build) (64-bit)
  • Screen size 27"
  • Resolution 1920*1080 -No scaling

Additional context Add any other context about the problem here.

[reinink]

Hey! Thanks for reporting this. You're not the first person to bump into this — see #1327.

The "Join the community" link not highlighting on click is actually expected behavior, although admittedly it feels a bit odd. The heuristic that we apply is "As long as a section is visible, that section is the active one". Meaning we don't highlight the item that you click, but rather the item that has the content currently visible based on your scroll position. And since you can't scroll past the bottom of the page, it's difficult to make the "Join the community" section the currently visible section — not unless you make your browser window really narrow:

That said, the "Configuring the library" link shouldn't suffer from this same "limitation" — and from my testing clicking on this link always results in the link becoming active. That said I did notice that if I either zoom in or zoom out using the browser zoom controls, then for some reason the math is off and the link isn't highlighted.

To correct this I've added a scroll position buffer to the table of contents, which seems to resolve this issue. This push has been fixed, so you're welcome to download the Syntax template again, or alternatively you can just make this change directly in your project in the /src/components/TableOfContents.tsx file on line 39:

-       if (top >= heading.top) {
+       if (top >= heading.top - 10) {

Hope that helps 🤙

[musashi-garami]

Ok great I understand! Thanks that makes sense. Also that line change you provided works well! Tested it now. Thank you.