Navbar broken on official Vue website

[shadow-light]

The navbar doesn't support a lot of items without overflowing the viewport on medium width devices. I discovered this issue on it, but it's been locked. I then tested it out on the official Vue website which also uses VitePress and it too is broken! Seems worth opening the issue up again for discussion and/or resolution.

[brc-dd]

vue website doesn’t use vitepress’ default theme. But there is no good solution for this other than maybe putting less items in navbar.

[shadow-light]

Ah I see. I think a decent solution would be automatically limiting the navbar to e.g. 3 items on medium screens, and then auto-placing the rest in the "..." menu along with the social links etc.

I've simulated this already by adding a "More" group that has the same items that come after it. And then used media queries to hide the "more" group on wide screens, and hide the items that follow on narrower screens. Like so:

        nav: [
            {text: "Articles", link: '/learn', activeMatch: '/(learn|articles)'},
            {text: "Videos", link: '/videos/documentary', activeMatch: '/videos'},
            {text: "More", items: more_menu_items},
            ...more_menu_items,
        ],

// Show "More" dropdown when no space to display all nav items
.VPNavScreenMenuGroup
    display: none  // Never show the "More" option in narrow-width menu dropdown
@media (max-width: 999px)
    .VPNavBarMenuGroup ~ .VPNavBarMenuLink
        display: none  // Hide links after the "More" when it's showing since it includes them
@media (min-width: 1000px)
    .VPNavBarMenuGroup
        display: none  // Hide the "More" item when links are all visible

This shouldn't be too hard to automate and place in the existing "..." menu. As it can be confusing to have a "More" dropdown right next to a "..." dropdown which implies the same thing.

[shadow-light]