Files
FixIt/layouts/_partials/header.html
T

328 lines
16 KiB
HTML

{{- $buildDrafts := .Site.BuildDrafts -}}
{{- $homeRelPermalink := .Scratch.Get "homeRelPermalink" -}}
{{- /* Desktop header */ -}}
<header class="desktop animate__faster" id="header-desktop">
<div class="header-wrapper"{{ if .Site.Params.githubCorner.enable }} data-github-corner="{{ .Site.Params.githubCorner.position }}"{{ end }}>
<div class="header-title">
<a href="{{ $homeRelPermalink }}" title="{{ .Site.Title }}">
{{- with .Site.Params.header.title -}}
{{- with .logo -}}
{{- dict "Src" . "Class" "logo" "Alt" $.Site.Title "Width" 32 "Height" 32 | partial "plugin/image.html" -}}
{{- end -}}
{{- with .pre -}}
<span class="header-title-pre">{{ . | safeHTML }}</span>
{{- end -}}
{{- if .typeit -}}
{{- $.Store.Set "hasTyped" true -}}
<span class="typeit"><template>{{ .name | default $.Site.Title }}</template></span>
{{- else -}}
<span class="header-title-text">{{ .name | default $.Site.Title }}</span>
{{- end -}}
{{- with .post -}}
<span class="header-title-post">{{ . | safeHTML }}</span>
{{- end -}}
{{- else -}}
<span class="header-title-text">{{ .Site.Title }}</span>
{{- end -}}
</a>
{{- with .Site.Params.header.subtitle -}}
{{- if .typeit -}}
{{- $.Store.Set "hasTyped" true -}}
<span class="typeit header-subtitle"><template>{{ .name }}</template></span>
{{- else -}}
<span class="header-subtitle">{{ .name }}</span>
{{- end -}}
{{- end -}}
</div>
<nav>
<ul class="menu">
{{- range .Site.Menus.main -}}
{{- $url := .URL -}}
{{- with $url -}}
{{- $url = . | relLangURL -}}
{{- end -}}
{{- with .Page -}}
{{- $url = .RelPermalink -}}
{{- end -}}
{{- if (ne .Params.Draft true) | or $buildDrafts | and (ne .Params.Type "mobile") -}}
<li class="menu-item{{ if $.IsMenuCurrent `main` . | or ($.HasMenuCurrent `main` .) | or (eq $.RelPermalink $url) }} active{{ end }}{{ with .Params.Class }} {{ . }}{{ end }}{{ if .HasChildren }} has-children{{ end }}">
<a class="menu-link"
{{- with $url }} href="{{ $url }}"{{ else }} href="javascript:void(0);"{{ end }}
{{- with .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 -}}
</a>
{{- if .HasChildren -}}
{{ dict "Class" "dropdown-icon fa-solid fa-chevron-down" | partial "plugin/icon.html" }}
<ul class="sub-menu">
{{- range $k, $v := .Children -}}
{{- $url := $v.URL -}}
{{- with $url -}}
{{- $url = . | relLangURL -}}
{{- end -}}
{{- with $v.Page -}}
{{- $url = .RelPermalink -}}
{{- end -}}
{{- 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` $v | or ($.HasMenuCurrent `main` $v) | or (eq $.RelPermalink $url) }} active{{ end }}{{ with $v.Params.Class }} {{ . }}{{ end }}">
<a class="menu-link"
{{- with $url }} href="{{ $url }}"{{ else }} href="javascript:void(0);"{{ end }}
{{- with $v.Title }} title="{{ . }}"{{ end }}
{{- if (urls.Parse $url).Host }} rel="noopener noreferrer" target="_blank"{{ 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 -}}
{{- end -}}
</ul>
{{- end -}}
</li>
{{- end -}}
{{- end -}}
{{- if .Site.Menus.main -}}
<li class="menu-item delimiter"></li>
{{- end -}}
{{- if .Site.Params.search.enable -}}
<li class="menu-item search" id="search-desktop">
<input type="text" placeholder="{{ .Site.Params.search.placeholder | default (T `assets.searchPlaceholder`) }}" id="search-input-desktop">
<a href="javascript:void(0);" class="search-button search-toggle" id="search-toggle-desktop" title="{{ T `assets.search` }}">
{{ dict "Class" "fa-solid fa-search fa-fw" | partial "plugin/icon.html" }}
</a>
<a href="javascript:void(0);" class="search-button search-clear" id="search-clear-desktop" title="{{ T `assets.clear` }}">
{{ dict "Class" "fa-solid fa-times-circle fa-fw" | partial "plugin/icon.html" }}
</a>
<span class="search-button search-loading" id="search-loading-desktop">
{{ dict "Class" "fa-solid fa-spinner fa-fw fa-spin" | partial "plugin/icon.html" }}
</span>
</li>
{{- end -}}
<li class="menu-item theme-switch" title="{{ T "header.switchTheme" }}">
{{ dict "Class" "fa-solid fa-adjust fa-fw" | partial "plugin/icon.html" }}
</li>
{{- if hugo.IsMultilingual -}}
<li class="menu-item language-switch">
<span role="button" aria-label="{{ T "header.selectLanguage" }}" title="{{ T "header.selectLanguage" }}">
{{- dict "Class" "fa-solid fa-language fa-fw" | partial "plugin/icon.html" -}}
</span>
<ul class="sub-menu">
{{- if (eq .Kind "404") -}}
{{- range .Sites -}}
{{- if ne . $.Site -}}
{{- $link := printf "%v/404.html" .LanguagePrefix -}}
<li class="menu-item">
<a href="{{ $link }}" class="menu-link" title="{{- .Language.LanguageName -}}">
{{- .Language.LanguageName -}}
</a>
</li>
{{- end -}}
{{- end -}}
{{- else if .IsTranslated -}}
{{- range .AllTranslations -}}
<li class="menu-item">
{{- if ne .Lang $.Lang -}}
<a href="{{ .RelPermalink }}" class="menu-link" title="{{ .Language.LanguageName }}">{{ .Language.LanguageName }}</a>
{{- else -}}
<span class="text-secondary" title="{{ .Language.LanguageName }}">{{ .Language.LanguageName }}</span>
{{- end -}}
</li>
{{- end -}}
{{- else -}}
<li class="menu-item">{{- T "header.noMoretTranslations" -}}</li>
{{- end -}}
</ul>
</li>
{{- end -}}
{{- /* Custom menu items in the desktop header */ -}}
{{- block "custom-menu:desktop" . }}{{ end -}}
</ul>
</nav>
</div>
</header>
{{- /* Mobile header */ -}}
<header class="mobile animate__faster" id="header-mobile">
<div class="header-container">
<div class="header-wrapper">
<div class="header-title">
<a href="{{ $homeRelPermalink }}" title="{{ .Site.Title }}">
{{- with .Site.Params.header.title -}}
{{- with .logo -}}
{{- dict "Src" . "Class" "logo" "Alt" $.Site.Title "Width" 26 "Height" 26 | partial "plugin/image.html" -}}
{{- end -}}
{{- with .pre -}}
<span class="header-title-pre">{{ . | safeHTML }}</span>
{{- end -}}
{{- if .typeit -}}
{{- $.Store.Set "hasTyped" true -}}
<span class="typeit"><template>{{ .name | default $.Site.Title }}</template></span>
{{- else -}}
<span class="header-title-text">{{ .name | default $.Site.Title }}</span>
{{- end -}}
{{- with .post -}}
<span class="header-title-post">{{ . | safeHTML }}</span>
{{- end -}}
{{- else -}}
<span class="header-title-text">{{ .Site.Title }}</span>
{{- end -}}
</a>
{{- with .Site.Params.header.subtitle -}}
{{- if .typeit -}}
{{- $.Store.Set "hasTyped" true -}}
<span class="typeit header-subtitle"><template>{{ .name }}</template></span>
{{- else -}}
<span class="header-subtitle">{{- .name -}}</span>
{{- end -}}
{{- end -}}
</div>
<div class="menu-toggle" id="menu-toggle-mobile">
<span></span><span></span><span></span>
</div>
</div>
<nav>
<ul class="menu" id="menu-mobile">
{{- if .Site.Params.search.enable -}}
<li class="search-wrapper">
<div class="search mobile" id="search-mobile">
<input type="text" placeholder="{{ .Site.Params.search.placeholder | default (T `assets.searchPlaceholder`) }}" id="search-input-mobile">
<a href="javascript:void(0);" class="search-button search-toggle" id="search-toggle-mobile" title="{{ T `assets.search` }}">
{{ dict "Class" "fa-solid fa-search fa-fw" | partial "plugin/icon.html" }}
</a>
<a href="javascript:void(0);" class="search-button search-clear" id="search-clear-mobile" title="{{ T `assets.clear` }}">
{{ dict "Class" "fa-solid fa-times-circle fa-fw" | partial "plugin/icon.html" }}
</a>
<span class="search-button search-loading" id="search-loading-mobile">
{{ dict "Class" "fa-solid fa-spinner fa-fw fa-spin" | partial "plugin/icon.html" }}
</span>
</div>
<a href="javascript:void(0);" class="search-cancel" id="search-cancel-mobile">
{{ T `assets.cancel` }}
</a>
</li>
{{- end -}}
{{- $currentPage := . -}}
{{- range .Site.Menus.main -}}
{{- $url := .URL -}}
{{- with $url -}}
{{- $url = . | relLangURL -}}
{{- end -}}
{{- with .Page -}}
{{- $url = .RelPermalink -}}
{{- end -}}
{{- if (ne .Params.Draft true) | or $buildDrafts | and (ne .Params.Type "desktop") -}}
<li class="menu-item{{ if $.IsMenuCurrent `main` . | or ($.HasMenuCurrent `main` .) | or (eq $.RelPermalink $url) }} active{{ end }}{{ with .Params.Class }} {{ . }}{{ end }}">
{{- if .HasChildren -}}
<span class="nested-item">
<a class="menu-link"
{{- with $url }} href="{{ $url }}"{{ else }} href="javascript:void(0);"{{ end }}
{{- with .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 -}}
</a>
{{ dict "Class" "dropdown-icon fa-solid fa-chevron-right" | partial "plugin/icon.html" }}
</span>
<ul class="sub-menu">
{{- range $k, $v := .Children -}}
{{- $url := $v.URL -}}
{{- with $url -}}
{{- $url = . | relLangURL -}}
{{- end -}}
{{- with $v.Page -}}
{{- $url = .RelPermalink -}}
{{- end -}}
{{- 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` $v | or ($.HasMenuCurrent `main` $v) | or (eq $.RelPermalink $url) }} active{{ end }}{{ with $v.Params.Class }} {{ . }}{{ end }}">
<a class="menu-link"
{{- with $url }} href="{{ $url }}"{{ else }} href="javascript:void(0);"{{ end }}
{{- with $v.Title }} title="{{ . }}"{{ end }}
{{- if (urls.Parse $url).Host }}rel="noopener noreferrer" target="_blank"{{ 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 -}}
{{- end -}}
</ul>
{{- else -}}
<a class="menu-link"
{{- with $url }} href="{{ $url }}"{{ else }} href="javascript:void(0);"{{ end }}
{{- with .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 -}}
</a>
{{- end -}}
</li>
{{- end -}}
{{- end -}}
<li class="menu-item menu-system">
<span class="menu-system-item theme-switch" title="{{ T "header.switchTheme" }}">{{ dict "Class" "fa-solid fa-adjust fa-fw" | partial "plugin/icon.html" }}</span>
{{- if hugo.IsMultilingual -}}
<span class="menu-system-item language-switch">
<span role="button" aria-label="{{ T "header.selectLanguage" }}" title="{{ T "header.selectLanguage" }}">
{{- .Language.LanguageName -}}
{{- dict "Class" "dropdown-icon fa-solid fa-chevron-down" | partial "plugin/icon.html" -}}
</span>
<select class="language-select" onchange="location = this.value;">
{{- if eq .Kind "404" -}}
{{- range .Sites -}}
{{- $link := printf "%v/404.html" .LanguagePrefix -}}
<option value="{{ $link }}"{{ if eq . $.Site }} selected disabled{{ end }}>
{{- .Language.LanguageName -}}
</option>
{{- end -}}
{{- else if .IsTranslated -}}
{{- range .AllTranslations -}}
<option value="{{ .RelPermalink }}"{{ if eq .Lang $.Lang }} selected disabled{{ end }}>
{{- .Language.LanguageName -}}
</option>
{{- end -}}
{{- else -}}
<option disabled>{{- T "header.noMoretTranslations" -}}</option>
{{- end -}}
</select>
</span>
{{- end -}}
{{- /* Custom menu items in the mobile header */ -}}
{{- block "custom-menu:mobile" . }}{{ end -}}
</li>
</ul>
</nav>
</div>
</header>
{{- if .Site.Params.search.enable -}}
<div class="search-dropdown desktop">
<div id="search-dropdown-desktop"></div>
</div>
<div class="search-dropdown mobile">
<div id="search-dropdown-mobile"></div>
</div>
{{- end -}}