From 9dc03b05c7413e523dd8cf0c1ad8d9452f60efb9 Mon Sep 17 00:00:00 2001
From: guillaume-haerinck <guillaume.haerinck@outlook.com>
Date: Sun, 6 Nov 2022 10:53:43 +0100
Subject: [PATCH] Support navbar child items

---
 assets/css/common/header.css | 33 +++++++++++++++++++++++++++++++++
 layouts/partials/header.html | 12 +++++++++++-
 2 files changed, 44 insertions(+), 1 deletion(-)

diff --git a/assets/css/common/header.css b/assets/css/common/header.css
index 64894da4..e141e84d 100644
--- a/assets/css/common/header.css
+++ b/assets/css/common/header.css
@@ -91,3 +91,36 @@ body:not(.dark) #sun {
 .logo-switches {
     flex-wrap: inherit;
 }
+
+.sub-menu {
+    position: absolute;
+    visibility: hidden;
+    list-style: none;
+    z-index: 10;
+    border-radius: var(--radius);
+    padding: 0 15px;
+    background-color: var(--code-bg);
+    border: 1px solid var(--tertiary);
+}
+
+.sub-menu a:hover {
+    text-shadow: 0px 0px 1px currentColor;
+}
+
+.menu-item:hover .sub-menu {
+    visibility: visible;
+    display: block;
+}
+
+.sub-menu:hover {
+    visibility: visible;
+}
+
+.arrow-down {
+    border-left: 5px solid transparent;
+    border-right: 5px solid transparent;
+    border-top: 5px solid var(--primary);
+    position: relative;
+    top: 1em;
+    left: 6px;
+}
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 4a7291e2..52e8a74f 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -125,7 +125,7 @@
             {{- $menu_item_url := (cond (strings.HasSuffix .URL "/") .URL (printf "%s/" .URL) ) | absLangURL }}
             {{- $page_url:= $currentPage.Permalink | absLangURL }}
             {{- $is_search := eq (site.GetPage .KeyName).Layout `search` }}
-            <li>
+            <li class="menu-item">
                 <a href="{{ .URL | absLangURL }}" title="{{ .Title | default .Name }} {{- cond $is_search (" (Alt + /)" | safeHTMLAttr) ("" | safeHTMLAttr ) }}"
                 {{- cond $is_search (" accesskey=/" | safeHTMLAttr) ("" | safeHTMLAttr ) }}>
                     <span {{- if eq $menu_item_url $page_url }} class="active" {{- end }}>
@@ -141,7 +141,17 @@
                         <path d="M10 14L21 3"></path>
                     </svg>
                     {{- end }}
+                    {{ if .HasChildren }}
+                    <i class="arrow-down"></i>
+                    {{ end }}
                 </a>
+            {{ if .HasChildren }}
+                <div class="sub-menu">
+                    {{ range .Children }}
+                        <a href="{{ .URL }}">{{ .Name }}</a>
+                    {{ end }}
+                </div>
+            {{ end }}
             </li>
             {{- end }}
         </ul>