Version Selector Dropdown UX Improvement

[Harsh3991]

🧭 Problem Statement

I've identified a UX issue where the version selector dropdown (4.x / 3.x / 2.x) appears globally in the navigation bar — including on the homepage.
This creates confusion because:

• Homepage Context: The homepage serves as a version-agnostic introduction to Socket.IO.
• Immediate Redirect: Clicking any version instantly navigates away from the homepage to documentation.
• Context Mismatch: Version selection is only relevant within documentation pages.

---

💡 Proposed Solution

Conditionally render the version selector dropdown only when users are browsing documentation pages (/docs/ routes), keeping the homepage clean and focused.

---

⚙️ Implementation Ready ✅

This fix has already been implemented locally and is ready for a pull request.

Highlights:

• Uses Docusaurus routing to detect when the user is on documentation pages.
• Maintains all existing version functionality within docs.
• Provides a cleaner navigation architecture.
• Non-breaking and minimal in scope.

---

🌟 Why This Improvement Matters

• Better UX: Reduces cognitive load on the homepage.
• Cleaner Architecture: Keeps UI elements where they belong.
• Intuitive Navigation: Prevents confusing redirects from the homepage.

---

If this improvement aligns with the project’s vision, I’d be grateful for the opportunity to contribute this fix.
Please let me know if I can proceed with submitting the pull request.

[darrachequesne]

Hi! That's a good idea 👍 not sure how it can be done, because that's the default behavior of docusaurus: https://docusaurus.io/

[Harsh3991]

Hi! Thanks for the response! 👋

You're absolutely right about Docusaurus's default behavior. However, Docusaurus provides "swizzling" that allows customizing default components. Here's the approach I took:

Implementation Steps

1. Used official swizzling

   npm run swizzle @docusaurus/theme-classic Navbar -- --eject

2. Added route detection in src/theme/Navbar/Content/index.js:

   import {useLocation} from '@docusaurus/router';
   const location = useLocation();
   const isDocsPage = location.pathname.startsWith('/docs');

3. Conditionally render the version dropdown only on /docs/* routes

Benefits

This approach:

• Uses official Docusaurus APIs
• Maintains all existing functionality
• Is compatible with future updates
• Has been tested locally and is ready for deployment

Would you like me to submit a PR so you can review the implementation? I'm happy to make any adjustments based on your feedback!