Skip to content

feat(navbar): navbar link icon item #781

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 8 commits into from
Aug 24, 2025
Merged

feat(navbar): navbar link icon item #781

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
c6b6830
chore: extract link code to a partial
ldez Aug 24, 2025
d7ffe33
feat(navbar): item icon
ldez Aug 24, 2025
be6cf03
chore: generate
ldez Aug 24, 2025
11f7b5f
docs: add configuration
ldez Aug 24, 2025
41faa57
review
ldez Aug 24, 2025
4232e65
chore: generate
ldez Aug 24, 2025
9ea89d1
chore: add examples
ldez Aug 24, 2025
4c9b2ce
chore: showcase
ldez Aug 24, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion assets/css/compiled/main.css
View file
Open in desktop

Large diffs are not rendered by default.

13 changes: 10 additions & 3 deletions exampleSite/content/docs/guide/configuration.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down
76 changes: 76 additions & 0 deletions layouts/_partials/navbar-link.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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:float-left">
{{- partial "utils/icon" (dict "name" $icon "attributes" `height="1em" class="hx:inline-block hx:mb-1 "`) -}}
</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"
>
{{- if and (eq .Params.type "link") .Params.icon -}}
<span class="hx:float-left">
{{- partial "utils/icon" (dict "name" .Params.icon "attributes" `height="1em" class="hx:inline-block hx:mb-1 hx:mr-1"`) -}}
</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-block {{ $activeClass }}"
>
{{- if $icon -}}
<span>
{{- partial "utils/icon" (dict "name" $icon "attributes" `height="1em" class="hx:inline-block hx:mb-1 hx:mr-1"`) -}}
</span>
{{- end -}}
<span class="hx:text-center">
{{- or (T $item.Identifier) $item.Name | safeHTML -}}
</span>
</a>
{{- end -}}
56 changes: 4 additions & 52 deletions layouts/_partials/navbar.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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") -}}
Expand All @@ -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 -}}
Expand Down