UCOMmandIt
/
uci-hugo-doc
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

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

uci-hugo-doc
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
exampleSite/content/usage/menus.md
View File

@ -90,3 +90,18 @@ more:
```
[![Example bundle menu](/media/more-menu.png)](/media/more-menu.png)
## Extra Header Menu
If you want to customize the header menu, this can be achieved by using a data file written in YAML and placed at `data/menu/extra.yml`.
**Example:**
```Yaml
---
header:
- name: GitHub
ref: https://github.com/thegeeklab/hugo-geekdoc
icon: gdoc_github
external: true
```

6
exampleSite/data/menu/extra.yaml Normal file
View File

@ -0,0 +1,6 @@
---
header:
- name: GitHub
ref: https://github.com/thegeeklab/hugo-geekdoc
icon: gdoc_github
external: true

1
layouts/404.html
View File

@ -13,6 +13,7 @@
{{ partial "svg-icon-symbols" . }}
<div class="wrapper">
<input type="checkbox" class="hidden" id="menu-header-control" />
{{ partial "site-header" (dict "Root" . "MenuEnabled" false) }}
<main class="gdoc-error flex-even">

1
layouts/_default/baseof.html
View File

@ -15,6 +15,7 @@
<div class="wrapper {{ if default false .Site.Params.GeekdocDarkModeDim }}dark-mode-dim{{ end }}">
<input type="checkbox" class="hidden" id="menu-control" />
<input type="checkbox" class="hidden" id="menu-header-control" />
{{ $navEnabled := default true .Page.Params.GeekdocNav }}
{{ partial "site-header" (dict "Root" . "MenuEnabled" $navEnabled) }}

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>

25
src/sass/_base.scss
View File

@ -126,6 +126,10 @@ img {
vertical-align: middle;
}
#gdoc-dark-mode {
cursor: pointer;
}
.fake-link:hover {
background-image: linear-gradient(var(--link-color), var(--link-color));
background-position: 0 100%;
@ -170,7 +174,7 @@ img {
&__link,
&__link:visited {
color: inherit;
color: var(--header-font-color);
}
&__link:hover {
@ -193,6 +197,20 @@ img {
}
}
.gdoc-menu-header {
&__items {
display: inline-block;
}
&__control {
display: none;
.icon {
cursor: pointer;
}
}
}
.gdoc-nav {
flex: 0 0 $menu-width;
font-size: $font-size-14;
@ -215,9 +233,14 @@ img {
margin: 0;
padding: 0;
.icon {
cursor: pointer;
}
.icon.gdoc_menu {
display: inline-block;
}
.icon.gdoc_arrow_back {
display: none;
}

28
src/sass/_mobile.scss
View File

@ -23,6 +23,16 @@
}
}
.gdoc-menu-header {
&__items {
display: none;
}
&__control {
display: inline-block;
}
}
.gdoc-error {
padding: $padding-16 * 6 $padding-16;
@ -75,4 +85,22 @@
display: inline-block;
}
}
#menu-header-control:checked ~ .gdoc-header {
.gdoc-brand__title {
display: none;
}
.gdoc-menu-header {
&__items {
display: inline-block;
}
&__control {
.icon.gdoc_keyborad_arrow_left {
display: none;
}
}
}
}
}