fix: add sidebar highlighting for direct route URLs #448
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Implements DirectRouteHighlighter component to highlight sidebar items and expand parent folders when navigating via /docs/direct/* URLs. Maps direct routes to canonical routes for consistent navigation UX.
✅ Deploy Preview for kubestellar-docs ready!Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify project configuration. |
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
👋 Hello! @rudy128 Welcome to the Kubestellar.
Thank you for submitting your first Pull Request to KubeStellar. We are delighted to have you in our Universe!
Please make sure to check out our Contribution Guide and feel free to join our Slack channel for any questions.
oksaumya
added
documentation
Member
Member
|
looks good |
naman9271
added a commit
that referenced
this pull request
Jan 1, 2026
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
📌 Fixes
Fixes #3579
📝 Summary of Changes
Implemented sidebar highlighting and folder expansion for direct route URLs (/docs/direct/*) to match the behavior of canonical category routes.
Changes Made
DirectRouteHighlightercomponent to handle client-side route highlightingpage-map.tsto exportdirectRouteMapmapping direct routes to canonical routeslayout.tsxto integrate the highlighter componentcomponents/docs/index.tsxfor consistencyChecklist
Please ensure the following before submitting your PR:
Screenshots or Logs (if applicable)
Before:
/docs/direct/get-startedshowed no sidebar entryAfter:
/docs/direct/get-startedhighlights "Get started" in the sidebar/docs/install-configure/get-started👀 Reviewer Notes
Why This Approach?
I explored several alternatives before settling on client-side DOM manipulation:
❌ Adding duplicate links to pageMap: Would create duplicate navigation entries in the sidebar, causing UI clutter and confusing users with two identical links.
❌ Using Next.js route aliases/rewrites: Nextra's sidebar highlighting is deeply tied to the
pageMapstructure. Route aliases would serve the same content but wouldn't help Nextra recognize which sidebar item to highlight since the route doesn't exist in the pageMap.❌ Modifying Nextra's core route matching: Would require forking or monkey-patching Nextra's internal navigation logic, making upgrades difficult and breaking compatibility.
✅ Client-side highlighting (chosen approach):
Technical Details:
/docs/direct/file) to canonical routes (/docs/category/file)x:bg-primary-100,x:font-semibold, etc.) for visual consistency💬 Open to Feedback
If this approach doesn't align with the project's architecture or preferences, I'm happy to refactor using any alternative solution the maintainers suggest. Please let me know if you'd prefer: