systemausfall.org/hugo-theme-hilfe
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

feat: add optional icon menu to site header (#184)

Browse source
This commit is contained in:
Robert Kaussow 2021-08-12 18:17:49 +02:00 • committed by GitHub
parent afe2abc746
commit 57bbc46a47
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 149 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

31
layouts/partials/menu-extra.html Normal file
View file

@ -0,0 +1,31 @@
{{ $current := .current }}
{{ template "menu-extra" dict "sect" .source "current" $current "site" $current.Site "target" .target }}
<!-- template -->
{{ define "menu-extra" }}
{{ $current := .current }}
{{ $site := .site }}
{{ $target := .target }}
{{ $sect := .sect }}
{{ range sort (default (seq 0) $sect) "weight" }}
{{ if isset . "ref" }}
{{ $this := $site.GetPage .ref }}
{{ $isCurrent := eq $current $this }}
{{ $icon := default false .icon }}
{{ if not .icon }}
{{ errorf "Missing 'icon' attribute in data file for '%s' menu item '%s'" $target .name }}
{{ end }}
{{ if eq $target "header" }}
<a href="{{ if .external }}{{ .ref }}{{ else }}{{ relref $current .ref }}{{ end }}" class="gdoc-header__link">
<svg class="icon {{ .icon }}">
<title>{{ .name }}</title>
<use xlink:href="#{{ .icon }}"></use>
</svg>
</a>
{{ end }}
{{ end }}
{{ end }}
{{ end }}

50
layouts/partials/site-header.html
View file

@ -2,8 +2,14 @@
<div class="container flex align-center justify-between">
{{ if .MenuEnabled }}
<label for="menu-control" class="gdoc-nav__control">
<svg class="icon gdoc_menu"><use xlink:href="#gdoc_menu"></use></svg>
<svg class="icon gdoc_arrow_back"><use xlink:href="#gdoc_arrow_back"></use></svg>
<svg class="icon gdoc_menu">
<title>Open Nav Menu</title>
<use xlink:href="#gdoc_menu"></use>
</svg>
<svg class="icon gdoc_arrow_back">
<title>Close Nav Menu</title>
<use xlink:href="#gdoc_arrow_back"></use>
</svg>
</label>
{{ end }}
<a class="gdoc-header__link" href="{{ .Root.Site.BaseURL }}">
@ -12,10 +18,40 @@
<span class="gdoc-brand__title">{{ .Root.Site.Title }}</span>
</span>
</a>
<span id="gdoc-dark-mode">
<svg class="icon gdoc_brightness_dark"><use xlink:href="#gdoc_brightness_dark"></use></svg>
<svg class="icon gdoc_brightness_light"><use xlink:href="#gdoc_brightness_light"></use></svg>
<svg class="icon gdoc_brightness_auto"><use xlink:href="#gdoc_brightness_auto"></use></svg>
</span>
<div class="gdoc-menu-header">
{{ if .Root.Site.Data.menu.extra.header }}
<span class="gdoc-menu-header__items">
{{ partial "menu-extra" (dict "current" .Root "source" .Root.Site.Data.menu.extra.header "target" "header") }}
{{ end }}
<span id="gdoc-dark-mode">
<svg class="icon gdoc_brightness_dark">
<title>Toggle Dark/Light/Auto mode</title>
<use xlink:href="#gdoc_brightness_dark"></use>
</svg>
<svg class="icon gdoc_brightness_light">
<title>Toggle Dark/Light/Auto mode</title>
<use xlink:href="#gdoc_brightness_light"></use>
</svg>
<svg class="icon gdoc_brightness_auto">
<title>Toggle Dark/Light/Auto mode</title>
<use xlink:href="#gdoc_brightness_auto"></use>
</svg>
</span>
{{ if .Root.Site.Data.menu.extra.header }}
<label for="menu-header-control" class="gdoc-menu-header__control">
<svg class="icon gdoc_keyborad_arrow_right">
<use xlink:href="#gdoc_keyborad_arrow_right"></use>
<title>Close Menu Bar</title>
</svg>
</label>
</span>
<label for="menu-header-control" class="gdoc-menu-header__control">
<svg class="icon gdoc_keyborad_arrow_left">
<use xlink:href="#gdoc_keyborad_arrow_left"></use>
<title>Open Menu Bar</title>
</svg>
</label>
{{ end }}
</div>
</div>
</header>