From ab228b2643cc92c5f9d200efa870304355eeca2b Mon Sep 17 00:00:00 2001
From: Henk Verlinde <henk@ventizo.com>
Date: Tue, 1 Feb 2022 09:57:11 +0100
Subject: [PATCH] feat: add support for sub navigation main menu

---
 assets/scss/common/_dark.scss        | 16 ++++++++++++++++
 assets/scss/components/_buttons.scss | 27 +++++++++++++++++++++++++++
 config/_default/menus/menus.en.toml  | 27 +++++++++++++++++++++++++++
 layouts/partials/header/header.html  | 23 ++++++++++++++++++++---
 4 files changed, 90 insertions(+), 3 deletions(-)

diff --git a/assets/scss/common/_dark.scss b/assets/scss/common/_dark.scss
index f958836..c312215 100644
--- a/assets/scss/common/_dark.scss
+++ b/assets/scss/common/_dark.scss
@@ -527,3 +527,19 @@ $navbar-dark-active-color:          $link-color-dark;
     border-color: $border-dark;
   }
 }
+
+[data-dark-mode] .dropdown-menu.dropdown-menu-main {
+  background: $body-overlay-dark;
+}
+
+[data-dark-mode] .dropdown-menu-main .dropdown-item {
+  color: $body-color-dark;
+}
+
+[data-dark-mode] .dropdown-menu-main .dropdown-item:hover {
+  color: $link-color-dark;
+}
+
+[data-dark-mode] .dropdown-menu-main .dropdown-item.active {
+  color: $link-color-dark;
+}
diff --git a/assets/scss/components/_buttons.scss b/assets/scss/components/_buttons.scss
index 7e22328..9cb51e5 100644
--- a/assets/scss/components/_buttons.scss
+++ b/assets/scss/components/_buttons.scss
@@ -218,3 +218,30 @@ pre {
   margin-left: -0.1875rem;
   margin-right: -0.3125rem;
 }
+
+.dropdown-menu.dropdown-menu-main {
+  width: 100%;
+}
+
+.dropdown-menu-main .dropdown-item {
+  color: inherit;
+  font-size: $font-size-base;
+  font-weight: 400;
+  text-decoration: none;
+}
+
+.dropdown-menu-main .dropdown-item:hover {
+  background-color: transparent;
+  color: $primary;
+}
+
+.dropdown-menu-main .dropdown-item.active {
+  color: $primary;
+  font-weight: 400;
+  text-decoration: none;
+  background-color: inherit;
+}
+
+.dropdown-menu-main .dropdown-item.active:hover {
+  background-color: transparent;
+}
diff --git a/config/_default/menus/menus.en.toml b/config/_default/menus/menus.en.toml
index 6bcf3f2..21daea8 100644
--- a/config/_default/menus/menus.en.toml
+++ b/config/_default/menus/menus.en.toml
@@ -44,6 +44,33 @@
   url = "/blog/"
   weight = 20
 
+[[main]]
+  name = "Prologue"
+  weight = 30
+  identifier = "prologue"
+  url = "/docs/prologue/"
+
+[[main]]
+  name = "Introduction"
+  weight = 35
+  identifier = "introduction"
+  url = "/docs/prologue/introduction/"
+  parent = "prologue"
+
+[[main]]
+  name = "Quick Start"
+  weight = 40
+  identifier = "quick-start"
+  url = "/docs/prologue/quick-start/"
+  parent = "prologue"
+
+[[main]]
+  name = "Commands"
+  weight = 45
+  identifier = "commands"
+  url = "/docs/prologue/commands/"
+  parent = "prologue"
+
 [[social]]
   name = "GitHub"
   pre = "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"feather feather-github\"><path d=\"M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22\"></path></svg>"
diff --git a/layouts/partials/header/header.html b/layouts/partials/header/header.html
index 1d6f0bc..fa1d51f 100644
--- a/layouts/partials/header/header.html
+++ b/layouts/partials/header/header.html
@@ -34,9 +34,26 @@
             {{- $active = or $active (eq .Name $current.Title) -}}
             {{- $active = or $active (and (eq .Name ($section | humanize)) (eq $current.Section $section)) -}}
             {{- $active = or $active (and (eq .Name "Blog") (eq $current.Section "blog" "contributors")) -}}
-            <li class="nav-item">
-              <a class="nav-link ps-0 py-1{{ if $active }} active{{ end }}" href="{{ .URL | relLangURL }}">{{ .Name }}</a>
-            </li>
+            {{ if .HasChildren }}
+              <li class="nav-item dropdown">
+                <a class="nav-link dropdown-toggle ps-0 py-1" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                  {{ .Name }}
+                  <span class="dropdown-caret"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg></span>
+                </a>
+                <ul class="dropdown-menu dropdown-menu-main shadow rounded border-0" aria-labelledby="navbarDropdownMenuLink">
+                  {{ range .Children -}}
+                  {{- $active = eq .Name $current.Title -}}
+                    <li>
+                      <a class="dropdown-item{{ if $active }} active{{ end }}" href="{{ .URL | relLangURL }}"{{ if $active }} aria-current="true"{{ end }}>{{ .Name }}</a>
+                    </li>
+                  {{ end -}}
+                </ul>
+              </li>
+            {{ else }}
+              <li class="nav-item">
+                <a class="nav-link ps-0 py-1{{ if $active }} active{{ end }}" href="{{ .URL | relLangURL }}">{{ .Name }}</a>
+              </li>
+            {{ end }}
           {{ end -}}
         </ul>
         <hr class="text-black-50 my-4 d-md-none">