Merge pull request #397 from madoke/subnavigation-draft

✨ add nested menus capability

assets/icons/chevron-down.svg

@@ -0,0 +1,12 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 20 20"
+  fill="currentColor"
+  aria-hidden="true"
+>
+  <path
+    fill-rule="evenodd"
+    d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
+    clip-rule="evenodd"
+  />
+</svg>

assets/js/header.js

@@ -0,0 +1,11 @@
+function header_toggle_nested_menu(element) {
+  if (!element) {
+    throw new Error("Could not find button")
+  }
+  let parent_element = element.parentElement;
+  if(!parent_element) {
+    throw new Error("Could not get parent element from button")
+  }
+  let nested_menu = parent_element.querySelector(".header-nested-menu")
+  nested_menu.classList.toggle('hidden');
+}

layouts/partials/head.html

@@ -147,4 +147,10 @@
   </script>
   {{ end }}
   {{ end }}
-</head>
+
+  {{/* Header */}}
+  {{ $headerLib := resources.Get "js/header.js" }}
+  {{ $headerLib := $headerLib | resources.Minify }}
+  {{ $headerJS := $headerLib | resources.Fingerprint "sha512" }}
+  <script defer type="text/javascript" src="{{ $headerJS.RelPermalink }}" integrity="{{ $headerJS.Data.Integrity }}"></script>
+</head>

layouts/partials/header/README.md

@@ -0,0 +1,37 @@
+# Header
+
+- `header-option-simple.html` renders menus without nested items
+- `header-option-nested.html` renders menus with nested items
+- `header-option.html` decides which template to render given the menu
+
+- `js/header.js` exposes a method to toggle visibility of nested menus
+
+- Nesting is configured using the `parent` and `identifier` properties in `menus.en.yml`. Example
+
+```yml
+main:
+ - name: Product
+    identifier: product
+    weight: 1
+  - name: Analytics
+    pageRef: analytics
+    weight: 1
+    parent: product
+  - name: Engagement
+    pageRef: engagement
+    weight: 2
+    parent: product
+
+secondary:
+ - name: Engineering
+    identifier: engineering
+    weight: 1
+  - name: Computers
+    pageRef: computers
+    weight: 1
+    parent: engineering
+  - name: Rockets
+    pageRef: rockets
+    weight: 2
+    parent: engineering
+```

layouts/partials/header/basic.html

@@ -22,18 +22,15 @@
             
             
         </nav>
-        <div class="site-header-menu-main hidden md:flex items-center space-x-5 md:ml-12">
+        <nav class="site-header-menu-main hidden md:flex items-center space-x-5 md:ml-12">
 
             {{ if .Site.Menus.main }}
             {{ range .Site.Menus.main }}
-            <a href="{{ .URL }}" {{ if or (strings.HasPrefix .URL "http:") (strings.HasPrefix .URL "https:") }} target="_blank"{{ end }} class="text-base font-medium text-gray-500 hover:text-gray-900" title="{{ .Title }}">
-                {{ partial "icon.html" .Pre }}
-                {{ if and .Pre .Name }} &nbsp; {{ end }}
-                {{ .Name | markdownify | emojify }}
-            </a>
-            {{ end }}
-            {{ end }}
 
+            {{ partial "header/header-option.html" . }}
+
+            {{ end }}
+            {{ end }}
             {{ partial "translations.html" . }}
 
             {{ if .Site.Params.enableSearch | default false }}
@@ -59,7 +56,7 @@
             </div>
             {{ end }}
 
-        </div>
+          </nav>
         <div class="flex md:hidden items-center space-x-5 md:ml-12">
 
             <span></span>
@@ -143,13 +140,7 @@
   <div class="flex flex-1 items-center justify-between">
     <div class="hidden md:flex items-center space-x-5">
       {{ range .Site.Menus.subnavigation }}
-      <a href="{{ .URL }}" class="prose dark:prose-invert"
-          {{ if or (strings.HasPrefix .URL "http:" ) (strings.HasPrefix .URL "https:" ) }} target="_blank" {{ end }}
-          class="text-base font-medium text-gray-500 hover:text-gray-900" title="{{ .Title }}">
-        {{ partial "icon.html" .Pre }}
-        {{ if and .Pre .Name }} &nbsp; {{ end }}
-        {{ .Name | markdownify | emojify }}
-      </a>
+        {{ partial "header/header-option.html" . }}
       {{ end }}
     </div>
   </div>

layouts/partials/header/header-option-nested.html

@@ -0,0 +1,32 @@
+<div class="relative">
+  <button
+    type="button"
+    class="header-toggle-nested-menu-button text-base hover:text-primary-600 dark:hover:text-primary-400"
+    aria-expanded="false"
+    onclick="header_toggle_nested_menu(this)"
+  >
+    <div class="hidden md:flex items-center">
+      <span>
+          {{ partial "icon.html" .Pre }}
+          {{ if and .Pre .Name }} &nbsp; {{ end }}
+          {{ .Name | markdownify | emojify }}
+        </span>
+      {{ partial "icon.html" "chevron-down" }}
+    </div>
+  </button>
+  <div
+    class="hidden header-nested-menu absolute z-10 px-2 "
+  >
+    <div
+      class="overflow-hidden rounded-lg shadow-lg ring-1 ring-black ring-opacity-5"
+    >
+      <div
+        class="md:flex flex-col"
+      >
+        {{ range .Children }}
+          {{ partial "header/header-option.html" . }}
+        {{ end }}
+      </div>
+    </div>
+  </div>
+</div>

layouts/partials/header/header-option-simple.html

@@ -0,0 +1,5 @@
+<a href="{{ .URL }}" {{ if or (strings.HasPrefix .URL "http:") (strings.HasPrefix .URL "https:") }} target="_blank"{{ end }} class="text-base font-medium text-gray-500 hover:text-gray-900" title="{{ .Title }}">
+    {{ partial "icon.html" .Pre }}
+    {{ if and .Pre .Name }} &nbsp; {{ end }}
+    {{ .Name | markdownify | emojify }}
+</a>

layouts/partials/header/header-option.html

@@ -0,0 +1,5 @@
+{{ if .HasChildren }} 
+  {{ partial "header/header-option-nested.html" . }}
+{{ else }}
+  {{ partial "header/header-option-simple.html" . }}
+{{ end }}