Re-style the right-hand article navigation panel

[borland]

Results

Claude does all the coding here; I reviewed and re-steered it several times to improve things.

• Updates the styling of the right hand article nav panel to match the figma design
• Overhauls the javascript which hilights the selected area as you scroll. The existing code had several bugs and would sometimes hilight a section other than the one you had clicked on. This bug exists today on octopuscom/docs but it became easier to trigger with the slightly smaller font sizes in the style update.
  • It now updates instantly as you scroll, rather than on a 1000ms timer
  • It now reflects the position within the document accurately

Before

After

Testing

Tested on macOS in MS Edge (chrome), Safari and Firefox

[enf0rc3]

Can this be deleted now

[borland]

Yeah looks like it's unused except for the components demo page.

I think I'd prefer to leave it though, in case we need to put it back for some reason, and file a card to clean it up at the end, if that's OK?

[borland]

Actually, given that the spelling error caused me to need to re-spin the PR, I deleted the component.

Claude keeps writing comments in the CSS which say "colour" but our spelling requires AMERICAN :-(

[team-marketing-branch-protections]

Pull request environment is available at https://stoctodocspr3318.z22.web.core.windows.net.

You can view the ephemeral environment status in Octopus Deploy.

This environment will be automatically deprovisioned when the pull request is closed, or after 7 days of inactivity.

[enf0rc3]

Looks all good overall, would be happy with merge, one thing i did notice is we have lost toe header highlighted when its expanded and the hover affect like the original, also the carat is facing right when its collapsed instead of down saying, click to pull the menu down, all trivial.

can see here, side by side view (zoom in on both to trigger the responsive view.)
Before: https://octopus.com/docs/installation
After: https://stoctodocspr3318.z22.web.core.windows.net/docs/installation

Oh and there is also a c-spell error

[borland]

one thing i did notice is we have lost toe header highlighted when its expanded and the hover affect like the original

I'm not sure what this means?

also the carat is facing right when its collapsed instead of down saying, click to pull the menu down, all trivial.

I didn't realize that the article nav event did anything in the mobile layout! Upon seeing it though, the change is intentional; In the figma it states for the nav that unexpanded sections should have a rightward-facing arrow. Down means expanded. The previous behaviour was wrong. Good job claude

[ellen-octopus]

Very nice @borland 👏🏻

I have two hopefully small bits of feedback:

1. Can we make the gap between the body content and the article navigation 80px?

2. This is a nice-to-have, so happy to put this in the backlog to address as polish, but would it be possible to make the active nav transition smooth - like the way Linear does it?

CleanShot.2026-08-07.at.15.26.18.mp4