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

exampleSite/content/usage/menus.md

@@ -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
+```

exampleSite/data/menu/extra.yaml

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

layouts/404.html

@@ -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">

layouts/_default/baseof.html

@@ -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) }}
 

layouts/partials/menu-extra.html

@@ -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 }}

layouts/partials/site-header.html

@@ -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_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>
         {{ 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">
+        <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>
 </header>

src/sass/_base.scss

@@ -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;
     }

src/sass/_mobile.scss

@@ -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;
+        }
+      }
+    }
+  }
 }