Align sidebar with Penpot design (#630)

[Roshan-Singh-07]

This PR aligns the sidebar with the official Penpot design to improve visual consistency and UX.

Changes

• Updated sidebar typography to use Lato and secondary text color
• Set HTTP method labels to font-weight 400
• Made request and folder context menus (three dots) visible only on hover
• Fixed text truncation to prevent overlap with context menu
• Ensured consistent hover behavior between requests and folders
• Fixed a TypeScript issue where a non-renderable URL object could be passed as a React child (fallback now uses url.base)

Result

• Sidebar now visually matches the Penpot design
• Cleaner UI with less visual noise
• Improved readability for long request and folder names

Demo: short screen recording attached showing hover behavior and text truncation.

Screen.Recording.2026-02-07.144348.mp4

Closes #630

[SoulKa]

This is currently blocked by #693. Will review and merge after that PR

[SoulKa]

The PR #693 is merged now. There are two conflicting changes (see NavFolder and NavRequest). You will need to rebase on the develop branch.

[Roshan-Singh-07]

Rebased on the latest main branch and resolved the conflicts in NavFolder and NavRequest.

The sidebar now preserves the recent collapsible and drag-and-drop changes while aligning the styling and behavior with the Penpot design. Please let me know if any further adjustments are needed.

Thanks!