Skip to content

Commit

Permalink
✨ Feat: add submenu param divided and change submenu border color
Browse files Browse the repository at this point in the history
  • Loading branch information
@Lruihao
Lruihao committed Jul 11, 2024
1 parent 2b2bde7 commit f9a09e4
Show file tree
Hide file tree
Showing 4 changed files with 50 additions and 24 deletions.
19 changes: 15 additions & 4 deletions assets/css/_core/_header.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,6 +58,17 @@ header {
margin: 0;
padding: 0;

.menu-item-divider {
list-style: none;
margin: 0.25rem 0.5rem;
height: 1px;
background-color: $menu-border-color;

[data-theme='dark'] & {
background-color: $menu-border-color-dark;
}
}

.menu-item {
list-style: none;

Expand Down Expand Up @@ -262,20 +273,20 @@ header {
display: none;
top: calc(#{$header-height} - 0.75rem);
border-radius: $global-border-radius;
border: 1px solid $global-border-color;
border: 1px solid $menu-border-color;
background-color: $header-background-color;
@include transition(box-shadow 0.3s ease);
@include box-shadow(0 0 1.5rem 0 rgba(0, 0, 0, 0.1));

[data-theme='dark'] & {
background-color: $header-background-color-dark;
border-color: $global-border-color-dark;
border-color: $menu-border-color-dark;
@include box-shadow(0 0 1.5rem 0 rgba(255, 255, 255, 0.1));
}

.menu-item {
height: $header-height*0.5;
line-height: $header-height*0.5;
height: $submenu-height;
line-height: $submenu-height;
max-width: 15rem;
white-space: nowrap;
text-overflow: ellipsis;
Expand Down
7 changes: 7 additions & 0 deletions assets/css/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,13 @@ $header-title-font-size: 1.5rem !default;
$menu-active-color: #161209 !default;
$menu-active-color-dark: #fff !default;

// Border color of the menu item
$menu-border-color: darken($global-border-color, 5%) !default;
$menu-border-color-dark: lighten($global-border-color-dark, 5%) !default;

// Height of the submenu item of desktop header
$submenu-height: $header-height * 0.5 !default;

// Color of the search background
$search-background-color: #e9e9e9 !default;
$search-background-color-dark: #363636 !default;
Expand Down
2 changes: 2 additions & 0 deletions hugo.toml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,8 @@ enableEmoji = true
icon = "fa-solid fa-archive"
# FixIt 0.2.16 | NEW set menu item type, optional values: ["mobile", "desktop"]
type = ""
# FixIt 0.3.9 | NEW whether to show the submenu item divider line
divided = false
[[menu.main]]
identifier = "categories"
parent = ""
Expand Down
46 changes: 26 additions & 20 deletions layouts/partials/header.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,25 +58,28 @@
{{- if .HasChildren -}}
{{ dict "Class" "dropdown-icon fa-solid fa-chevron-down" | partial "plugin/icon.html" }}
<ul class="sub-menu">
{{ range .Children }}
{{- $url := .URL | relLangURL -}}
{{- with .Page -}}
{{- range $k, $v := .Children -}}
{{- $url := $v.URL | relLangURL -}}
{{- with $v.Page -}}
{{- $url = .RelPermalink -}}
{{- end -}}
{{- if (ne .Params.Draft true) | or $buildDrafts | and (ne .Params.Type "mobile") -}}
{{- if (ne $v.Params.Draft true) | or $buildDrafts | and (ne $v.Params.Type "mobile") -}}
{{- if $k | and $v.Params.Divided -}}
<li class="menu-item-divider" aria-hidden="true"></li>
{{- end -}}
<li
class="menu-item{{ if $.IsMenuCurrent `main` . | or ($.HasMenuCurrent `main` .) | or (eq $.RelPermalink $url) }} active{{ end }}{{ with .Params.Class }} {{ . }}{{ end }}"
class="menu-item{{ if $.IsMenuCurrent `main` $v | or ($.HasMenuCurrent `main` $v) | or (eq $.RelPermalink $url) }} active{{ end }}{{ with $v.Params.Class }} {{ . }}{{ end }}"
>
<a
class="menu-link"
href="{{ $url }}"
{{ with .Title }}title="{{ . }}"{{ end }}
{{ with $v.Title }}title="{{ . }}"{{ end }}
{{ if (urls.Parse $url).Host }}rel="noopener noreferrer" target="_blank"{{ end }}
>
{{- with .Pre -}}{{- . | safeHTML }} {{ end }}
{{- with .Params.Icon -}}{{ dict "Class" (printf "%v fa-fw fa-sm" .) | partial "plugin/icon.html" }} {{ end }}
{{- .Name }}
{{- with .Post }} {{ . | safeHTML -}}{{- end -}}
{{- with $v.Pre -}}{{- . | safeHTML }} {{ end }}
{{- with $v.Params.Icon -}}{{ dict "Class" (printf "%v fa-fw fa-sm" .) | partial "plugin/icon.html" }} {{ end }}
{{- $v.Name }}
{{- with $v.Post }} {{ . | safeHTML -}}{{- end -}}
</a>
</li>
{{- end -}}
Expand Down Expand Up @@ -234,25 +237,28 @@
{{ dict "Class" "dropdown-icon fa-solid fa-chevron-right" | partial "plugin/icon.html" }}
</span>
<ul class="sub-menu">
{{ range .Children }}
{{- $url := .URL | relLangURL -}}
{{- with .Page -}}
{{- range $k, $v := .Children -}}
{{- $url := $v.URL | relLangURL -}}
{{- with $v.Page -}}
{{- $url = .RelPermalink -}}
{{- end -}}
{{- if (ne .Params.Draft true) | or $buildDrafts | and (ne .Params.Type "desktop") -}}
{{- if (ne $v.Params.Draft true) | or $buildDrafts | and (ne $v.Params.Type "desktop") -}}
{{- if $k | and $v.Params.Divided -}}
<li class="menu-item menu-item-divider" aria-hidden="true"></li>
{{- end -}}
<li
class="menu-item{{ if $.IsMenuCurrent `main` . | or ($.HasMenuCurrent `main` .) | or (eq $.RelPermalink $url) }} active{{ end }}{{ with .Params.Class }} {{ . }}{{ end }}"
class="menu-item{{ if $.IsMenuCurrent `main` $v | or ($.HasMenuCurrent `main` $v) | or (eq $.RelPermalink $url) }} active{{ end }}{{ with $v.Params.Class }} {{ . }}{{ end }}"
>
<a
class="menu-link"
href="{{ $url }}"
{{ with .Title }}title="{{ . }}"{{ end }}
{{ with $v.Title }}title="{{ . }}"{{ end }}
{{ if (urls.Parse $url).Host }}rel="noopener noreferrer" target="_blank"{{ end }}
>
{{- with .Pre -}}{{- . | safeHTML }} {{ end }}
{{- with .Params.Icon -}}{{ dict "Class" (printf "%v fa-fw fa-sm" .) | partial "plugin/icon.html" }} {{ end }}
{{- .Name }}
{{- with .Post }} {{ . | safeHTML -}}{{- end -}}
{{- with $v.Pre -}}{{- . | safeHTML }} {{ end }}
{{- with $v.Params.Icon -}}{{ dict "Class" (printf "%v fa-fw fa-sm" .) | partial "plugin/icon.html" }} {{ end }}
{{- $v.Name }}
{{- with $v.Post }} {{ . | safeHTML -}}{{- end -}}
</a>
</li>
{{- end -}}
Expand Down

0 comments on commit f9a09e4

Please sign in to comment.