feat(navbar): navbar link icon item (#781)

* chore: extract link code to a partial

* feat(navbar): item icon

* chore: generate

* docs: add configuration

* review

Co-authored-by: Xin <5097752+imfing@users.noreply.github.com>

* chore: generate

* chore: add examples

* chore: showcase

---------

Co-authored-by: Xin <5097752+imfing@users.noreply.github.com>

exampleSite/content/docs/guide/configuration.md

@@ -58,20 +58,27 @@ There are different types of menu items:
      params:
        type: search
    ```
-4. Icon
+4. Icon Only
    ```yaml
    - name: GitHub
      params:
        icon: github
    ```
-5. Theme Toggle
+5. Link with Icon
+   ```yaml
+   - name: Blog
+     params:
+       type: link
+       icon: rss
+   ```
+6. Theme Toggle
    ```yaml
     - name: Theme Toggle
       params:
         type: theme-toggle
         label: true # optional, default is false
    ```
-6. Language Switcher
+7. Language Switcher
    ```yaml
     - name: Language Switcher
       params:

exampleSite/hugo.yaml

@@ -85,6 +85,9 @@ menu:
       name: Showcase
       pageRef: /showcase
       weight: 5
+      params:
+        type: link
+        icon: collection
     - name: Search
       weight: 6
       params:
@@ -98,6 +101,9 @@ menu:
       name: Development ↗
       url: https://imfing.github.io/hextra/versions/latest/
       parent: versions
+      params:
+        type: link
+        icon: beaker
     - identifier: v0.9
       name: v0.9 ↗
       url: https://imfing.github.io/hextra/versions/v0.9/

exampleSite/hugo_stats.json

@@ -483,6 +483,7 @@
       "hx:md:h-[calc(100vh-var(--navbar-height)-var(--menu-height))]",
       "hx:md:hidden",
       "hx:md:inline-block",
+      "hx:md:inline-flex",
       "hx:md:justify-start",
       "hx:md:max-h-[min(calc(100vh-5rem-env(safe-area-inset-bottom)),400px)]",
       "hx:md:mr-0",

layouts/_partials/navbar-link.html

@@ -0,0 +1,76 @@
+{{- $currentPage := .currentPage -}}
+{{- $link := .link -}}
+{{- $item := .item -}}
+{{- $icon := .icon -}}
+{{- $external := .external -}}
+
+{{- $active := or ($currentPage.HasMenuCurrent "main" $item) ($currentPage.IsMenuCurrent "main" $item) -}}
+{{- $activeClass := cond $active "hx:font-medium" "hx:text-gray-600 hx:hover:text-gray-800 hx:dark:text-gray-400 hx:dark:hover:text-gray-200" -}}
+
+{{- if $item.HasChildren -}}
+{{- /* Dropdown menu for items with children */ -}}
+<div class="hx:relative hx:hidden hx:md:inline-block">
+  <button
+    title="{{ or (T $item.Identifier) $item.Name | safeHTML }}"
+    data-state="closed"
+    class="hextra-nav-menu-toggle hx:cursor-pointer hx:text-sm hx:contrast-more:text-gray-700 hx:contrast-more:dark:text-gray-100 hx:relative hx:-ml-2 hx:whitespace-nowrap hx:p-2 hx:flex hx:items-center hx:gap-1 {{ $activeClass }}"
+    type="button"
+    aria-label="{{ or (T $item.Identifier) $item.Name | safeHTML }}"
+  >
+    {{- if $icon -}}
+    <span class="hx:inline-flex hx:items-center">
+      {{- partial "utils/icon" (dict "name" $icon "attributes" `height="1em" class="hx:inline-block"`) -}}
+    </span>
+    {{- end -}}
+    <span class="hx:text-center">
+      {{- or (T $item.Identifier) $item.Name | safeHTML -}}
+    </span>
+    {{- partial "utils/icon.html" (dict "name" "chevron-down" "attributes" "height=12 class=\"hx:transition-transform hx:duration-200 hx:ease-in-out\"") -}}
+  </button>
+  <ul
+    class="hextra-nav-menu-items hx:hidden hx:z-20 hx:max-h-64 hx:overflow-auto hx:rounded-md hx:ring-1 hx:ring-black/5 hx:bg-white hx:py-1 hx:text-sm hx:shadow-lg hx:dark:ring-white/20 hx:dark:bg-neutral-800"
+    style="min-width: 100px;"
+  >
+    {{ range $item.Children }}
+    {{- $link := .URL -}}
+    {{- $external := strings.HasPrefix $link "http" -}}
+    {{- with .PageRef -}}
+    {{- if hasPrefix . "/" -}}
+    {{- $link = relLangURL (strings.TrimPrefix "/" .) -}}
+    {{- end -}}
+    {{- end -}}
+    <li class="hextra-nav-menu-item hx:flex hx:flex-col">
+      <a
+        href="{{ $link }}"
+        {{ if $external }}target="_blank" rel="noreferrer"{{ end }}
+        class="hx:text-gray-600 hx:hover:text-gray-800 hx:dark:text-gray-400 hx:dark:hover:text-gray-200 hx:relative hx:cursor-pointer hx:whitespace-nowrap hx:py-1.5 hx:transition-colors hx:ltr:pl-3 hx:ltr:pr-9 hx:rtl:pr-3 hx:rtl:pl-9 hx:flex hx:items-center hx:gap-1"
+      >
+        {{- if and (eq .Params.type "link") .Params.icon -}}
+        <span class="hx:inline-flex hx:items-center">
+          {{- partial "utils/icon" (dict "name" .Params.icon "attributes" `height="1em" class="hx:inline-block"`) -}}
+        </span>
+        {{- end -}}
+        {{- or (T .Identifier) .Name | safeHTML -}}
+      </a>
+    </li>
+    {{- end -}}
+  </ul>
+</div>
+{{- else -}}
+{{- /* Regular menu item without children */ -}}
+<a
+  title="{{ or (T .Identifier) .Name | safeHTML }}"
+  href="{{ $link }}"
+  {{ if $external }}target="_blank" rel="noreferrer"{{ end }}
+  class="hx:text-sm hx:contrast-more:text-gray-700 hx:contrast-more:dark:text-gray-100 hx:relative hx:-ml-2 hx:hidden hx:whitespace-nowrap hx:p-2 hx:md:inline-flex hx:items-center hx:gap-1 {{ $activeClass }}"
+>
+  {{- if $icon -}}
+  <span class="hx:inline-flex hx:items-center">
+    {{- partial "utils/icon" (dict "name" $icon "attributes" `height="1em" class="hx:inline-block"`) -}}
+  </span>
+  {{- end -}}
+  <span class="hx:text-center">
+    {{- or (T $item.Identifier) $item.Name | safeHTML -}}
+  </span>
+</a>
+{{- end -}}

layouts/_partials/navbar.html

@@ -31,7 +31,9 @@
           {{- end -}}
         {{- end -}}
 
-        {{- if eq .Params.type "theme-toggle" -}}
+        {{- if eq .Params.type "link" -}}
+          {{- partial "navbar-link.html" (dict "currentPage" $currentPage "link" $link "external" $external "item" . "icon" .Params.icon) -}}
+        {{- else if eq .Params.type "theme-toggle" -}}
           {{- partial "theme-toggle.html" (dict "iconHeight" $iconHeight "hideLabel" (not .Params.label) "iconHeight" $iconHeight "location" "top" "class" "hx:p-2") -}}
         {{- else if eq .Params.type "language-switch" -}}
           {{- partial "language-switch" (dict "context" $page "grow" false "hideLabel" (not .Params.label) "iconName" (.Params.icon | default "translate") "iconHeight" $iconHeight "location" "top" "class" "hx:p-2") -}}
@@ -44,57 +46,7 @@
             <span class="hx:sr-only">{{ or (T .Identifier) .Name | safeHTML }}</span>
           </a>
         {{- else -}}
-          {{- $active := or ($currentPage.HasMenuCurrent "main" .) ($currentPage.IsMenuCurrent "main" .) -}}
-          {{- $activeClass := cond $active "hx:font-medium" "hx:text-gray-600 hx:hover:text-gray-800 hx:dark:text-gray-400 hx:dark:hover:text-gray-200" -}}
-
-          {{- if .HasChildren -}}
-            {{/* Dropdown menu for items with children */}}
-            <div class="hx:relative hx:hidden hx:md:inline-block">
-              <button
-                title="{{ or (T .Identifier) .Name | safeHTML }}"
-                data-state="closed"
-                class="hextra-nav-menu-toggle hx:cursor-pointer hx:text-sm hx:contrast-more:text-gray-700 hx:contrast-more:dark:text-gray-100 hx:relative hx:-ml-2 hx:whitespace-nowrap hx:p-2 hx:flex hx:items-center hx:gap-1 {{ $activeClass }}"
-                type="button"
-                aria-label="{{ or (T .Identifier) .Name | safeHTML }}"
-              >
-                <span class="hx:text-center">{{ or (T .Identifier) .Name | safeHTML }}</span>
-                {{- partial "utils/icon.html" (dict "name" "chevron-down" "attributes" "height=12 class=\"hx:transition-transform hx:duration-200 hx:ease-in-out\"") -}}
-              </button>
-              <ul
-                class="hextra-nav-menu-items hx:hidden hx:z-20 hx:max-h-64 hx:overflow-auto hx:rounded-md hx:ring-1 hx:ring-black/5 hx:bg-white hx:py-1 hx:text-sm hx:shadow-lg hx:dark:ring-white/20 hx:dark:bg-neutral-800"
-                style="min-width: 100px;"
-              >
-                {{ range .Children }}
-                  {{- $link := .URL -}}
-                  {{- $external := strings.HasPrefix $link "http" -}}
-                  {{- with .PageRef -}}
-                    {{- if hasPrefix . "/" -}}
-                      {{- $link = relLangURL (strings.TrimPrefix "/" .) -}}
-                    {{- end -}}
-                  {{- end -}}
-                  <li class="hextra-nav-menu-item hx:flex hx:flex-col">
-                    <a
-                      href="{{ $link }}"
-                      {{ if $external }}target="_blank" rel="noreferrer"{{ end }}
-                      class="hx:text-gray-600 hx:hover:text-gray-800 hx:dark:text-gray-400 hx:dark:hover:text-gray-200 hx:relative hx:cursor-pointer hx:whitespace-nowrap hx:py-1.5 hx:transition-colors hx:ltr:pl-3 hx:ltr:pr-9 hx:rtl:pr-3 hx:rtl:pl-9"
-                    >
-                      {{- or (T .Identifier) .Name | safeHTML -}}
-                    </a>
-                  </li>
-                {{- end -}}
-              </ul>
-            </div>
-          {{- else -}}
-            {{/* Regular menu item without children */}}
-            <a
-              title="{{ or (T .Identifier) .Name | safeHTML }}"
-              href="{{ $link }}"
-              {{ if $external }}target="_blank" rel="noreferrer"{{ end }}
-              class="hx:text-sm hx:contrast-more:text-gray-700 hx:contrast-more:dark:text-gray-100 hx:relative hx:-ml-2 hx:hidden hx:whitespace-nowrap hx:p-2 hx:md:inline-block {{ $activeClass }}"
-            >
-              <span class="hx:text-center">{{ or (T .Identifier) .Name | safeHTML }}</span>
-            </a>
-          {{- end -}}
+          {{- partial "navbar-link.html" (dict "currentPage" $currentPage "link" $link "external" $external "item" .) -}}
         {{- end -}}
       {{- end -}}
     {{- end -}}