fix(docs): keep the nav within the viewport on tablets and laptops (#570)

The custom nav cluster (theme toggle + Fund + GitHub Star) rendered inline at
every width, overriding VitePress's responsive collapse: a horizontal scrollbar
at 768-959px and off-screen clipping of the buttons on 1280-1366px laptops.

Show the custom cluster only at >=1440px where it fits, defer to VitePress's
native nav below that, anchor the flyout menu to the start edge in RTL, and drop
the redundant "Home" nav link so the nav fits at 768px.

Closes #556
This commit is contained in:
SnapOtter
2026-07-18 12:27:00 +08:00
committed by GitHub
parent e3a01b6be6
commit 69f72a6c71
3 changed files with 68 additions and 29 deletions
+3 -2
View File
@@ -25,7 +25,6 @@ function prefixLinks(items: any[], locale: string): any[] {
// with no mapping (e.g. the version item) pass through unchanged. The nav is a
// flat list, so no recursion is needed here.
const NAV_KEY: Record<string, string> = {
Home: "nav.home",
Guide: "nav.guide",
Tools: "nav.tools",
"API Reference": "nav.apiReference",
@@ -286,7 +285,9 @@ function buildBaseTheme() {
logo: "/logo.png",
nav: [
{ text: "Home", link: "/" },
// No "Home" item: the logo already links home, and dropping it keeps the
// nav within the viewport at 768px (see github-stars.css for the wider
// responsive-nav fix).
{ text: "Guide", link: "/guide/getting-started" },
{ text: "Tools", link: "/tools/image/resize" },
{ text: "API Reference", link: "/api/rest" },