From 57bbc46a476d1736442cd6fb5fece5595401e4e4 Mon Sep 17 00:00:00 2001
From: Robert Kaussow <mail@geeklabor.de>
Date: Thu, 12 Aug 2021 18:17:49 +0200
Subject: [PATCH] feat: add optional icon menu to site header (#184)

---
 exampleSite/content/usage/menus.md | 15 +++++++++
 exampleSite/data/menu/extra.yaml   |  6 ++++
 layouts/404.html                   |  1 +
 layouts/_default/baseof.html       |  1 +
 layouts/partials/menu-extra.html   | 31 ++++++++++++++++++
 layouts/partials/site-header.html  | 50 +++++++++++++++++++++++++-----
 src/sass/_base.scss                | 25 ++++++++++++++-
 src/sass/_mobile.scss              | 28 +++++++++++++++++
 8 files changed, 149 insertions(+), 8 deletions(-)
 create mode 100644 exampleSite/data/menu/extra.yaml
 create mode 100644 layouts/partials/menu-extra.html

diff --git a/exampleSite/content/usage/menus.md b/exampleSite/content/usage/menus.md
index 8909c35..97b4e8f 100644
--- a/exampleSite/content/usage/menus.md
+++ b/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
+```
diff --git a/exampleSite/data/menu/extra.yaml b/exampleSite/data/menu/extra.yaml
new file mode 100644
index 0000000..92c32e2
--- /dev/null
+++ b/exampleSite/data/menu/extra.yaml
@@ -0,0 +1,6 @@
+---
+header:
+  - name: GitHub
+    ref: https://github.com/thegeeklab/hugo-geekdoc
+    icon: gdoc_github
+    external: true
diff --git a/layouts/404.html b/layouts/404.html
index 2c6a928..6dec1d2 100644
--- a/layouts/404.html
+++ b/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">
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 09e8d08..aea0a1a 100644
--- a/layouts/_default/baseof.html
+++ b/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) }}
 
diff --git a/layouts/partials/menu-extra.html b/layouts/partials/menu-extra.html
new file mode 100644
index 0000000..fb9298c
--- /dev/null
+++ b/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 }}
diff --git a/layouts/partials/site-header.html b/layouts/partials/site-header.html
index 982cb4d..2c03955 100644
--- a/layouts/partials/site-header.html
+++ b/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_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>
diff --git a/src/sass/_base.scss b/src/sass/_base.scss
index ea3a2cf..cd3f28d 100644
--- a/src/sass/_base.scss
+++ b/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;
     }
diff --git a/src/sass/_mobile.scss b/src/sass/_mobile.scss
index bdcc689..240cf55 100644
--- a/src/sass/_mobile.scss
+++ b/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;
+        }
+      }
+    }
+  }
 }