YNU-620: Mobile Header Customization & Versioning Robustness

[ihsraham]

🚀 Summary

This PR aligns the Mobile Navbar with Figma designs (implementing a custom 2-row layout) and ensures the robustness of the Versioning Lifecycle Scripts (release, remove, reset).

Screenshots:

Mobileview:

Desktop view:

---

📐 Technical Decision: Mobile Header Customization

The Requirement

Strict adherence to Figma design:

• Two-row mobile header.
• Row 1: Logo (Left) + Close Button (Right).
• Row 2: GitHub Icon (Left) + Version Switcher (Left) + Theme Toggle (Right).
• Constraint: Default Docusaurus navbar hides the Version Switcher and GitHub icon inside the Menu Menu (hamburger body) on mobile, offering no configuration to move them to the header.

The Solution: Component Swizzling

We chose the Component Swizzling approach to wrapping the Navbar/MobileSidebar/Header component.

Why not a plugin?
No existing Docusaurus plugin supports arbitrary "Row-based" layout customization for the header. Plugins typically inject items, but do not restructure the DOM hierarchy.

Why Swizzling?
"Swizzling" is the official Docusaurus mechanism for deep structural customization when default configuration limits are reached.

• Recommendation: Docusaurus docs state swizzling is the standard way to edit hidden rendering logic.
• Reference: Docusaurus Documentation: Swizzling

Implementation Details

• File: src/theme/Navbar/MobileSidebar/Header/index.tsx (Swizzled)
• Logic: Re-implemented the header rendering to include an explicit "Tools Row" containing the Version Dropdown and Github Link, which are forced visible via CSS overlays.

---

🛠️ Technical Decision: Versioning Scripts & Configuration

The Requirement

A robust command-line flow to Release, Test, and Reset versions without corrupting the project state.

The Fixes

1. Duplicate Route Resolution: Explicitly configured path: '0.5.x' for the frozen version in docusaurus.config.ts to prevent it from colliding with the current (0.6.x) docs at the root path /docs/.
2. Legacy Sidebar Cleanup: Removed lingering legacySidebar references from versioned_sidebars snapshots, ensuring no warnings about missing directories.
3. Script Logic: Validated release-version.js to ensure it snapshots correctly before bumping the package version.

✅ Verification

• Release Flow: npm run version:release 0.5.x 0.6.x -> Success.
• UI Check: Mobile Header correctly displays Version Switcher in the top area (Figma match).
• Reset Flow: npm run version:reset 0.5.x -> Cleanly allows reverting to single-version state.

[dimast-x]

The Position is good for me now, great job.
Have one thing left: for me, in Desktop mode the yellow line highlight is applied to the version switcher, and on mobile its both line and yellow background.

[dimast-x]

On Whitepaper page it looks great and no yellow highlight. on other pages it's for some reason present