feat: add optional icon menu to site header (#184)
parent
afe2abc746
commit
57bbc46a47
|
@ -90,3 +90,18 @@ more:
|
||||||
```
|
```
|
||||||
|
|
||||||
[![Example bundle menu](/media/more-menu.png)](/media/more-menu.png)
|
[![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
|
||||||
|
```
|
||||||
|
|
|
@ -0,0 +1,6 @@
|
||||||
|
---
|
||||||
|
header:
|
||||||
|
- name: GitHub
|
||||||
|
ref: https://github.com/thegeeklab/hugo-geekdoc
|
||||||
|
icon: gdoc_github
|
||||||
|
external: true
|
|
@ -13,6 +13,7 @@
|
||||||
{{ partial "svg-icon-symbols" . }}
|
{{ partial "svg-icon-symbols" . }}
|
||||||
|
|
||||||
<div class="wrapper">
|
<div class="wrapper">
|
||||||
|
<input type="checkbox" class="hidden" id="menu-header-control" />
|
||||||
{{ partial "site-header" (dict "Root" . "MenuEnabled" false) }}
|
{{ partial "site-header" (dict "Root" . "MenuEnabled" false) }}
|
||||||
|
|
||||||
<main class="gdoc-error flex-even">
|
<main class="gdoc-error flex-even">
|
||||||
|
|
|
@ -15,6 +15,7 @@
|
||||||
|
|
||||||
<div class="wrapper {{ if default false .Site.Params.GeekdocDarkModeDim }}dark-mode-dim{{ end }}">
|
<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-control" />
|
||||||
|
<input type="checkbox" class="hidden" id="menu-header-control" />
|
||||||
{{ $navEnabled := default true .Page.Params.GeekdocNav }}
|
{{ $navEnabled := default true .Page.Params.GeekdocNav }}
|
||||||
{{ partial "site-header" (dict "Root" . "MenuEnabled" $navEnabled) }}
|
{{ partial "site-header" (dict "Root" . "MenuEnabled" $navEnabled) }}
|
||||||
|
|
||||||
|
|
|
@ -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 }}
|
|
@ -2,8 +2,14 @@
|
||||||
<div class="container flex align-center justify-between">
|
<div class="container flex align-center justify-between">
|
||||||
{{ if .MenuEnabled }}
|
{{ if .MenuEnabled }}
|
||||||
<label for="menu-control" class="gdoc-nav__control">
|
<label for="menu-control" class="gdoc-nav__control">
|
||||||
<svg class="icon gdoc_menu"><use xlink:href="#gdoc_menu"></use></svg>
|
<svg class="icon gdoc_menu">
|
||||||
<svg class="icon gdoc_arrow_back"><use xlink:href="#gdoc_arrow_back"></use></svg>
|
<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>
|
</label>
|
||||||
{{ end }}
|
{{ end }}
|
||||||
<a class="gdoc-header__link" href="{{ .Root.Site.BaseURL }}">
|
<a class="gdoc-header__link" href="{{ .Root.Site.BaseURL }}">
|
||||||
|
@ -12,10 +18,40 @@
|
||||||
<span class="gdoc-brand__title">{{ .Root.Site.Title }}</span>
|
<span class="gdoc-brand__title">{{ .Root.Site.Title }}</span>
|
||||||
</span>
|
</span>
|
||||||
</a>
|
</a>
|
||||||
<span id="gdoc-dark-mode">
|
<div class="gdoc-menu-header">
|
||||||
<svg class="icon gdoc_brightness_dark"><use xlink:href="#gdoc_brightness_dark"></use></svg>
|
{{ if .Root.Site.Data.menu.extra.header }}
|
||||||
<svg class="icon gdoc_brightness_light"><use xlink:href="#gdoc_brightness_light"></use></svg>
|
<span class="gdoc-menu-header__items">
|
||||||
<svg class="icon gdoc_brightness_auto"><use xlink:href="#gdoc_brightness_auto"></use></svg>
|
{{ partial "menu-extra" (dict "current" .Root "source" .Root.Site.Data.menu.extra.header "target" "header") }}
|
||||||
</span>
|
{{ 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>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
|
@ -126,6 +126,10 @@ img {
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#gdoc-dark-mode {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
.fake-link:hover {
|
.fake-link:hover {
|
||||||
background-image: linear-gradient(var(--link-color), var(--link-color));
|
background-image: linear-gradient(var(--link-color), var(--link-color));
|
||||||
background-position: 0 100%;
|
background-position: 0 100%;
|
||||||
|
@ -170,7 +174,7 @@ img {
|
||||||
|
|
||||||
&__link,
|
&__link,
|
||||||
&__link:visited {
|
&__link:visited {
|
||||||
color: inherit;
|
color: var(--header-font-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
&__link:hover {
|
&__link:hover {
|
||||||
|
@ -193,6 +197,20 @@ img {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.gdoc-menu-header {
|
||||||
|
&__items {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__control {
|
||||||
|
display: none;
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.gdoc-nav {
|
.gdoc-nav {
|
||||||
flex: 0 0 $menu-width;
|
flex: 0 0 $menu-width;
|
||||||
font-size: $font-size-14;
|
font-size: $font-size-14;
|
||||||
|
@ -215,9 +233,14 @@ img {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
.icon.gdoc_menu {
|
.icon.gdoc_menu {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon.gdoc_arrow_back {
|
.icon.gdoc_arrow_back {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
|
@ -23,6 +23,16 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.gdoc-menu-header {
|
||||||
|
&__items {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&__control {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.gdoc-error {
|
.gdoc-error {
|
||||||
padding: $padding-16 * 6 $padding-16;
|
padding: $padding-16 * 6 $padding-16;
|
||||||
|
|
||||||
|
@ -75,4 +85,22 @@
|
||||||
display: inline-block;
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue