fix(docs-ui): move nav links to sidebar and fix mobile responsiveness

[tharropoulos]

Change Summary

• Improve search box behavior and spacing, especially on mobile and narrow screens
• Hide the search shortcut indicator on smaller screens unless the input is focused
• Improve navbar layout and alignment to match the sub-link spacing
• Add mobile-specific logo sizing support
• Polish version dropdown styling and placement in the sidebar
• Minor style cleanups and consistency fixes across VuePress components

Screenshots:

Mobile search UI

Mobile normal UI

Full-size search UI

PR Checklist

• I have read and signed the Contributor License Agreement.

[jasonbosco]

@tharropoulos Could you fix the margins / padding here:

I also noticed that some pages on mobile (not all) are missing the search bar:

Could you also fix the conflict

[tharropoulos]

@jasonbosco This had to do with how codeblocks and table tabs were overflowing, width wasn't enforced, leading to the whole page being horizontally scrollable, and since the navbar was a flexbox, the elements of the navbar were pushed to the end of the page. This was already the case for pages with large tables and codeblocks (try checking the /collections page from a phone currently).

Commits 3b46f81, c4a3d1f and 4770dd8 address this, along with some other general UI improvements for responsiveness.

[tharropoulos]

@tharropoulos Could you fix the margins / padding here

By fixing, do you mean increasing? 😅 Horizontal padding should be equal to that of the page's title IMO (one general padding and an inner because of the pink background). In terms of vertical?

[jasonbosco]

Mainly the padding inside the blue box, and the margin after the heading

[tharropoulos]

@jasonbosco updated the spacing to match on c690290

[jasonbosco]

@tharropoulos I just tried running the latest code locally, and I still see the overflow issue on the collections page

[tharropoulos]

@jasonbosco What were the viewport's dimensions?