[docs] Add `SideNav.Badge` to SideNav

[mj12albert]

Preview: https://deploy-preview-1811--base-ui.netlify.app/react/components/meter

Closes https://github.com/mui/base-ui/issues/1800

• [x] I have followed (at least) the PR section of the contributing guide.

[netlify[bot]]

✅ Deploy Preview for base-ui ready!

Name	Link
🔨 Latest commit	05f810f881b6c89af092e18a0b78911051c829a8
🔍 Latest deploy log	https://app.netlify.com/sites/base-ui/deploys/6811bf4c6923330008414fdd
😎 Deploy Preview	https://deploy-preview-1811--base-ui.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify[bot]]

✅ Deploy Preview for base-ui ready!

Name	Link
🔨 Latest commit	903724a9d515cd8cafb5f5198cd3342e440f02c6
🔍 Latest deploy log	https://app.netlify.com/projects/base-ui/deploys/682bd3e65f449e0008311f4e
😎 Deploy Preview	https://deploy-preview-1811--base-ui.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[atomiks]

@colmtuite something like this feels better to me

[mj12albert]

Or maybe this:

[michaldudak]

James' suggestion looks the best to me. The current version is very weird as it's shifted 1px above the baseline:

[colmtuite]

Any chance you can do the improve typography issue before this one? It will impact the vibe of this one a lot.

[pkg-pr-new[bot]]

Open in StackBlitz

npm i https://pkg.pr.new/@base-ui-components/react@1811

commit: 903724a

[mj12albert]

I rebased with the typography fixes, and added all the suggestions to the preview @colmtuite @atomiks @michaldudak

With the "corner" alignment, I think that when the item is active, the badge seems too close to the top border, and there's not enough room to both space it out more and offset it's original position (to be in the corner) at the same time

Also I find that on a crappier screen this font doesn't look as good in all caps, even with the maximum available font weight (600) it looks too close to the normal casing

BTW line-height: inherit instead of 1 seems to fix the baseline misalignment

[atomiks]

The NEW on Input but with 0.7rem (instead of 0.75rem) + 500 weight looks best to me. I don't think we should optimize for low PPI displays though

[colmtuite]

Ok, happy to go with the consensus. @mj12albert can you make the following updates please:

• Decrease badge font size to 11px computed.
• Change badge font-weight to 500.
• Increase badge letter-spacing to .035em, or something similar (whatever we have available that is close).
• Decrease the link's gap to 4px.
• Add 2px horizontal padding to the badge.
• Remove the horizontal translate from the badge, and decrease the vertical translate to -2px.

[mj12albert]

Updated: