docs: promote Agent Network in the sidebar and make sections collapsible - #920
docs: promote Agent Network in the sidebar and make sections collapsible#920emrcbrn wants to merge 3 commits into
Conversation
Rework the docs sidebar navigation: - Render any nav group flagged `featured: true` as a highlighted card at the top of the sidebar, with an optional `badge` label (currently Agent Network, "New"). The flag is data-driven, so a future feature can take the spot by moving two lines. - Add a dropdown chevron to every collapsible menu, including the top-level sections and the featured card, so it is obvious they expand. - Collapse the top-level sections by default and expand the active one, so the sidebar reads as a clean menu. - Only render the active-page marker while its section is open, fixing the orange highlight bar that lingered after collapsing an active section. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
|
@emrcbrn is attempting to deploy a commit to the NetBird GmbH Team on Vercel. A member of the Team first needs to authorize it. |
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
📝 WalkthroughWalkthroughThe navigation marks AGENT NETWORK as featured with a “New” badge and a collapsed initial state. Featured groups render first with a separator. Navigation groups now support featured styling, expandable chevrons, and independent chevron interaction. ChangesFeatured navigation groups
Estimated code review effort: 2 (Simple) | ~10 minutes Mergeability Score: ⚪ Minimal · up to This localized documentation navigation update is merge-ready after normal checks and review; no actionable merge-blocking risk remains. Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches 💡 1🛠️ Fix failing CI checks 💡
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/components/NavigationDocs.jsx (1)
1273-1303: 🎯 Functional Correctness | 🟠 Major | ⚡ Quick winMake the collapsed group controls keyboard-accessible.
Top-level groups now start collapsed. The
motion.h2and chevron<span>only handle mouse clicks. Keyboard users cannot expand a group and cannot reach its links.Use a semantic
<button>for each toggle control. Exposearia-expanded. Keep navigation links separate from toggle buttons whengroup.hrefexists.Also applies to: 1315-1326
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/components/NavigationDocs.jsx` around lines 1273 - 1303, Replace the clickable motion.h2 group control and chevron span with a semantic button-based toggle, preserving the existing open/close and navigation behavior while exposing aria-expanded={isOpen}. When group.href exists, keep its navigation link separate from the toggle button so keyboard users can access both the link and group controls; apply the same change to the related control at the second referenced section.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Outside diff comments:
In `@src/components/NavigationDocs.jsx`:
- Around line 1273-1303: Replace the clickable motion.h2 group control and
chevron span with a semantic button-based toggle, preserving the existing
open/close and navigation behavior while exposing aria-expanded={isOpen}. When
group.href exists, keep its navigation link separate from the toggle button so
keyboard users can access both the link and group controls; apply the same
change to the related control at the second referenced section.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro Plus
Run ID: 1a32c249-4929-40a4-b490-345daadef6f2
📒 Files selected for processing (1)
src/components/NavigationDocs.jsx
The collapse toggle was a click-only span, so after sections collapse by default keyboard and screen-reader users could not expand a section or reach its links. Make each toggle a semantic button with aria-expanded and an aria-label, which restores keyboard operation and announces the open state. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
…Network Restore the original behavior where top-level sections start expanded and only the nested sub-groups start collapsed, instead of collapsing everything. The featured Agent Network card keeps its own isOpen: false so it starts collapsed. The dropdown chevrons, featured card, and keyboard-accessible toggles are unchanged. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2 participants
What
Reworks the docs sidebar navigation (
NavigationDocs.jsx):featured: truerenders as a highlighted card at the top of the sidebar with an optionalbadgelabel. Agent Network takes the spot for now with a "New" badge. The mechanism is data-driven, so retiring or swapping the highlight for a future feature is a two-line change (documented inline).Notes
Verified in light and dark themes: the introduction page (all collapsed), inside an active section (that section expanded with the marker), and after collapsing an active Agent Network section (no lingering marker). Validated with
npm run build.🤖 Generated with Claude Code
Summary by CodeRabbit
Screenshots: