fix: Cut the navbar items when it's too long (#2785)

[RiverTwilight]

This pull request addresses issue #2785, ensuring that when the navbar has many items or items with long names, the overflow is managed elegantly without pushing the logo out of view.

Previously, an overflow of menu items caused layout issues, leading to a cluttered and inaccessible navbar.

Before

After

It's important to note that for most configurations, the visual appearance of the navbar remains unchanged:

[changeset-bot]

⚠️ No Changeset found

Latest commit: a6e3d93

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
nextra-v2	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Mar 19, 2024 5:56am

1 Ignored Deployment

Name	Status	Preview	Comments	Updated (UTC)
nextra	⬜️ Ignored (Inspect)	Visit Preview		Mar 19, 2024 5:56am

[vercel]

@RiverTwilight is attempting to deploy a commit to the Vercel Team on Vercel.

A member of the Team first needs to authorize it.

[dimaMachina]

now dropdown with type: 'menu' is hidden while opening

Screen.Recording.2024-03-15.at.01.14.25.mov

[dimaMachina]

seems like now all links are in reversed order

[RiverTwilight]

@dimaMachina The problems you mentioned are addressed. Currently if the menu is too long the search bar will be pushed out of the viewport, and the whole page will be scrollable on x-axis, which it's the best workaround, I think.

[arno-fukuda]

@dimaMachina The problems you mentioned are addressed. Currently if the menu is too long the search bar will be pushed out of the viewport, and the whole page will be scrollable on x-axis, which it's the best workaround, I think.

I might be overcomplicating things but ideally I'd like to see the hamburger kick in as soon as the sum of the total navbar items width starts exceeding the current viewport width.

So if someone created 100 categories, it would immediately start off as hamburger menu, even on fullscreen.

[dimaMachina]

@dimaMachina The problems you mentioned are addressed. Currently if the menu is too long the search bar will be pushed out of the viewport, and the whole page will be scrollable on x-axis, which it's the best workaround, I think.

I might be overcomplicating things but ideally I'd like to see the hamburger kick in as soon as the sum of the total navbar items width starts exceeding the current viewport width.

So if someone created 100 categories, it would immediately start off as hamburger menu, even on fullscreen.

this would be a perfect fix, not sure how to properly implement it, without overcomplicating things, any ideas are welcome

Also, I would accept the solution with overflow: scroll for nav links in navbar

[RiverTwilight]

@dimaMachina The problems you mentioned are addressed. Currently if the menu is too long the search bar will be pushed out of the viewport, and the whole page will be scrollable on x-axis, which it's the best workaround, I think.

I might be overcomplicating things but ideally I'd like to see the hamburger kick in as soon as the sum of the total navbar items width starts exceeding the current viewport width.

So if someone created 100 categories, it would immediately start off as hamburger menu, even on fullscreen.

this would be a perfect fix, not sure how to properly implement it, without overcomplicating things, any ideas are welcome

Also, I would accept the solution with overflow: scroll for nav links in navbar

Yes. I've thought about this idea but this might need JS to intercept, which makes the Navbar heavier, since we need dynamically measure the width of the available size and the horizontal stack width. Whatever I'll give another shot soon. There is no native CSS workaround to do this as far as I know.

The overflow solution seems not working as this cut dropdown menu (even only overflow-x is set to "scroll").

[RiverTwilight]

@dimaMachina Now it should be the expected behavior you want. If the items are too long it will be moved to sidebar, which's similar to mobile screen.

Since the sidebar & hamburger share the same content, it's oevrcomplicated to let the hamburger contain the nav items and sidebar remains unchanged under overflow context.

Under the hood

I use JS to measure the nav items width and the available width. The navOverflow context will be updated to true if the nav items width reach 90%+ of the available width.

Feel free to drop any comment!

[arno-fukuda]

If the items are too long it will be moved to sidebar

I believe this won't work for pages that use raw or full layout theme which is often used for landing pages.

{
  "index": {
    "title": "Home",
    "theme": {
      "layout": "raw"
    }
  }
}