style: improve sidebar item layout, focus style, and spacing

[MohamedH1998]

Summary

Use the preview branch in style: toc design improvements to view the all the changes in conjunction with another

What changed

• Override on the SidebarSublist - we were doing a lot of hacky things to customise this component, it made more sense to just create an override and create the compont ourselves
• Aligned the styling closer to what we're seeing in the dashboard
• Focus ring — added keyboard-only focus styles (focus-visible:outline-blue-500 / dark:focus-visible:outline-blue-400) to sidebar links and group toggles, matching the existing pattern used on the sidebar search input; outline-offset-0 keeps the ring flush to the element so it does not overlap adjacent items
• Focus ring clip fix — added padding-top: 1px to .sidebar-content to match the gap value, preventing the focus outline on the first sidebar item from being clipped

Before

After

Screen recording
https://github.com/user-attachments/assets/bb3424be-e62c-42fd-8ff5-eb996e33f96d

Screen.Recording.2026-03-19.at.22.37.08.mov

[github-actions]

This pull request requires reviews from CODEOWNERS as it changes files that match the following patterns:

Pattern	Owners
*.ts	@cloudflare/content-engineering, @kodster28
/src/components/	@cloudflare/content-engineering, @kodster28
*.astro	@cloudflare/content-engineering, @kodster28
*	@cloudflare/pcx-technical-writing

[github-actions]

Preview URL: https://3a4d0dd6.preview.developers.cloudflare.com
Preview Branch URL: https://style-sidebar-improvements.preview.developers.cloudflare.com

[pedrosousa]

Just checked the preview and I noticed that in dark mode the selected item for current page is not very visible (at least in my screen).

You were probably handling dark mode next, but leaving this here as a piece of feedback.

[mvvmm]

/bonk please review

[ask-bonk]

Reviewed the sidebar styling improvements.

Addressed from ahaywood's review:

• Empty class attribute on line 90 of SidebarSublist.astro - posted inline suggestion
• Dark mode active state visibility - noted the contrast concern from pedrosousa's feedback

Regarding the animation question: The JavaScript animation control (is-user-toggled class) is necessary to prevent CSS transitions from firing on page load when the sidebar state is restored from sessionStorage. CSS alone cannot distinguish between initial state restoration and user-initiated toggles.

Type safety: The flattenSidebar function properly types its parameter as SidebarEntry[], which is correct. The function is used internally and the types flow correctly through the component.

[ask-bonk]

Review complete. Posted:

1. Inline suggestion on SidebarSublist.astro:90 — remove empty string from class:list
2. Comment on sidebar.css:62 — dark mode active state visibility concern
3. General review summary addressing ahaywood's review points, including:
   • Why JavaScript is needed for animation control (distinguishes user toggles from page load state restoration)
   • Type safety confirmation for flattenSidebar function

github run