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

[enf0rc3]

Happy with this, did in person review found the UI is consistent with best practice.

Ellen did point out two minor things i would implement, smooth transition animation of the sidebar, now she mentions it it does look choppy.

Also the 80px, that could be considered apart of layout, but may as well do it now.

Feel free to merge those above changes without re-review

[borland]

Hey @ellen-octopus - I got claude to make those suggested changes. The position indicator in the right-nav now animates smoothly, and the right-nav now anchors 80px to the right of the content column.

An additional change I made was that the content column and right-nav are now centered together as a group., so the actual content is slightly left of center.

Claude offered this as a suggestion, and I took it, because that's what Linear's docs do, and seeing it in action, it's a lot nicer now that the nav is anchored to the content.

I'll merge this in the interests of unblocking @enf0rc3, who has other changes that rely on the right-nav waiting in the wings.

[ellen-octopus]

An additional change I made was that the content column and right-nav are now centered together as a group., so the actual content is slightly left of center.

Thanks @borland 🙌🏻 that was the intention, so that works out perfectly. Thanks so much, it looks fantastic 🎉