feat: Support Hero Icons in the nav bar menu #359
Conversation
✅ Deploy Preview for hugo-hextra ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
| @@ -56,6 +56,12 @@ | |||
| {{ if $external }}target="_blank" rel="noreferer"{{ end }} | |||
| class="hx-text-sm contrast-more:hx-text-gray-700 contrast-more:dark:hx-text-gray-100 hx-relative -hx-ml-2 hx-hidden hx-whitespace-nowrap hx-p-2 md:hx-inline-block {{ $activeClass }}" | |||
| > | |||
| {{ with .Params.hero_icon -}} | |||
There was a problem hiding this comment.
| {{ with .Params.hero_icon -}} | |
| {{ with .Params.icon -}} |
I'd prefer icon over hero_icon
There was a problem hiding this comment.
Ah, but .icon sets it as icon only, I believe. That's why I went with hero_icon.
A nice enhancement for clarity might be to change icon to icon_item and deprecate icon.
There was a problem hiding this comment.
Or, we could refactor this even more. Personally, I do like "making illegal states impossible". Although this gets a little bulky.
The docs describe this as four page types. Three of them are implicitly defined. We could use type for these as well (it's already used for type: search). That could look like this:
- name: github
url: "https://github.com/dogweather"
params:
type: icon // One of: pageref, url, search, icon
icon: github // Required for "icon" type. Defaults to question-mark-circle
- name: forum
url: "https://forum"
params:
type: url
icon: chat-alt-2There was a problem hiding this comment.
I like the idea of using an extra type there, let's consider these cases
# Icon only, for backward compatibility
- name: github
url: https://github.com/
params:
icon: github
# Link with icon, must set `type: link` and `icon`
- name: forum
params:
type: link
icon: chat-alt-2
# Search bar only
- name: Search
params:
type: search
icon: chat-alt-2 # undefined behavior, currently ignoredIn the future, we may extend the type to other widgets, for example, light/dark/system theme toggle switch:
- name: Theme toggle
params:
type: theme-toggle| @@ -56,6 +56,12 @@ | |||
| {{ if $external }}target="_blank" rel="noreferer"{{ end }} | |||
| class="hx-text-sm contrast-more:hx-text-gray-700 contrast-more:dark:hx-text-gray-100 hx-relative -hx-ml-2 hx-hidden hx-whitespace-nowrap hx-p-2 md:hx-inline-block {{ $activeClass }}" | |||
| > | |||
| {{ with .Params.hero_icon -}} | |||
| <span style="float: left; padding-right: 0.3em; padding-top: 2px; opacity: 0.75"> | |||
There was a problem hiding this comment.
Can we use Tailwind CSS classes here?
There was a problem hiding this comment.
I bet we could. I was hoping you'd know what they are. :-)
There was a problem hiding this comment.
I can begin converting them.
A Hugo
menusconfig withparams.hero_icon:...displays the icon next to the text.
I used GitHub and OpenAI as design examples for size and distance to the text. Here are more examples of combinations of icons/non-icons:
This code is running live here: https://forkful.ai/en/