feat(theme-classic): new 'html' type navbar item

[lex111]

Motivation

Inside a dropdown, it is sometimes useful to separate some items from others, or to group many items by adding heading text. Something like this:

So I propose to allow using raw html as content inside a dropdown item list.

Have you read the Contributing Guidelines on pull requests?

Yes

Test Plan

See preview.

Related PRs

[netlify]

✅ [V2]

Name	Link
🔨 Latest commit	b8e3e34
🔍 Latest deploy log	https://app.netlify.com/sites/docusaurus-2/deploys/6242d15f9c05880008f24a93
😎 Deploy Preview	https://deploy-preview-7058--docusaurus-2.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 settings.

[github-actions]

⚡️ Lighthouse report for the changes in this PR:

Category	Score
🟠 Performance	65
🟢 Accessibility	100
🟢 Best practices	92
🟢 SEO	100
🟢 PWA	90

Lighthouse ran on https://deploy-preview-7058--docusaurus-2.netlify.app/

[github-actions]

Size Change: +774 B (0%)

Total Size: 799 kB

Filename	Size	Change
website/build/assets/css/styles.********.css	106 kB	+101 B (0%)
website/build/assets/js/main.********.js	604 kB	+486 B (0%)
website/build/index.html	38.8 kB	+187 B (0%)

ℹ️ View Unchanged

Filename	Size
website/.docusaurus/globalData.json	50 kB

_{compressed-size-action}

[netlify]

✅ [V2]

Name	Link
🔨 Latest commit	5efbb4e
🔍 Latest deploy log	https://app.netlify.com/sites/docusaurus-2/deploys/62594459dd962500084aee4d
😎 Deploy Preview	https://deploy-preview-7058--docusaurus-2.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 settings.

[Josh-Cena]

I think we should simply introduce a new type: "html" element, like { type: "html", value: "<b>Supported package managers</b>" }, so that it's more in line with the sidebar item. It would be more inconsistent with footer items, but footer items don't have multiple types and aren't polymorphic anyways.

In addition, I don't think pure HTML top-level navbar items are useless, and could potentially make things more consistent (since we only forbid nested dropdowns, and HTML elements aren't dropdowns). WDYT?

[lex111]

I agree, this might useful if need to add a button or a link with an SVG icon as navbar item. But I don't know, is it necessary to keep the original class .navbar__item in this case? Should there be separate option to avoid from adding it?

[Josh-Cena]

The HTML sidebar items also add menu__list-item, so I think we should, for the sake of spacing consistency. Users can override them if they don't want that default style.

[slorber]

LGTM 👍

Nice dogfood idea

This looks a bit weird on mobile IMHO, maybe the items/separator should look more aligned?

[lex111]

This looks a bit weird on mobile IMHO, maybe the items/separator should look more aligned?

Any suggestions for improvement it? I agree, it doesn't look perfect, but it's perfectly acceptable.

[slorber]

yes, looks good enough to merge

I think it would be better if mobile would stay in between these 2 red lines

[Josh-Cena]

I agree. And in light mode the font color/size is a bit inconsistent. Would be better if we can have some special styles on mobile.

[Josh-Cena]

@lex111 Do you want to do some little improvements for the mobile sidebar so the styling looks more consistent, or do you think this is good enough to merge?

[lex111]

No, I think the current styling is good enough.
I can see that the color of heading is other, but if we want to fix it, we have to do it in Infima, but I would prefer not to do that.

[Josh-Cena]

I see what you mean, all good then!