From a3330ed27a1c62c1c547bb1d0da89ab1c60da0fb Mon Sep 17 00:00:00 2001
From: Georg Lukas <georg@op-co.de>
Date: Mon, 22 Feb 2021 18:22:44 +0100
Subject: [PATCH] Add submenu support, fix #30

---
 assets/css/style.css                 | 39 ++++++++++++++++++++++++++++
 layouts/partials/hamburger-menu.html | 12 ++++++++-
 layouts/partials/menu.html           | 15 ++++++++---
 3 files changed, 62 insertions(+), 4 deletions(-)

diff --git a/assets/css/style.css b/assets/css/style.css
index f505ee0..5e65794 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -83,6 +83,37 @@
 	width: 100%;
 }
 
+.menu__items .menu__items__item .submenu__list {
+	background-color: var(--white);
+	opacity: 0;
+	position: absolute;
+	max-width: 20rem;
+	transition: all 0.25s ease-in-out;
+	margin-top: 3px;
+	border-top: 3px solid var(--primary);
+	box-shadow: 0 1px 5px var(--divider);
+}
+
+.menu__items__item .submenu__list .menu__items__item {
+	margin: 0.5rem 1.5rem;
+}
+
+.menu__items__item .submenu__list .menu__items__item__link {
+	color: var(--primary-text);
+	padding: 0.5rem 0.5rem;
+	position: relative;
+}
+
+
+.menu__items .menu__items__item:hover > .submenu__list,
+.menu__items .menu__items__item:focus-within > .submenu__list,
+.menu__items .menu__items__item .submenu__list:hover,
+.menu__items .menu__items__item .submenu__list:focus {
+	visibility: visible;
+	opacity: 1;
+	display: block;
+}
+
 /* HAMBURGER MENU */
 .hamburger-menu {
 	display: none;
@@ -133,6 +164,14 @@
 	color: var(--primary-dark);
 }
 
+.hamburger__items__item .submenu__list {
+	margin: 1.00rem;
+}
+
+.submenu__list .hamburger__items__item {
+	margin: 1.00rem;
+}
+
 .toggle .hamburger__toggle:checked ~ .hamburger__items {
 	transform: translate(-70%, 0);
 	visibility: visible;
diff --git a/layouts/partials/hamburger-menu.html b/layouts/partials/hamburger-menu.html
index 40a9ad8..1f2f607 100644
--- a/layouts/partials/hamburger-menu.html
+++ b/layouts/partials/hamburger-menu.html
@@ -11,8 +11,18 @@
                 <a href="{{ .URL }}" class="hamburger__items__item__link" alt="{{ .Name }}" role="menuitem">
                     {{ .Name }}
                 </a>
+		{{ if .HasChildren }}
+		    <!--input type="checkbox" id="{{ .Name }}"-->
+		    <ul class="hamburger__items__item submenu__list">
+		    {{ range .Children }}
+		      <li class="hamburger__items__item">
+			<a class="hamburger__items__item__link " href="{{ .URL }}">{{ .Name }}</a>
+		      </li>
+		    {{ end }}
+		    </ul>
+		{{ end }}
             </li>
             {{ end }}
         </ul>
     </div>
-</nav>
\ No newline at end of file
+</nav>
diff --git a/layouts/partials/menu.html b/layouts/partials/menu.html
index abfb92b..c4715ca 100644
--- a/layouts/partials/menu.html
+++ b/layouts/partials/menu.html
@@ -3,11 +3,20 @@
         {{ $current := . }}
         {{ range .Site.Menus.main }}
         <li class="menu__items__item" aria-label="{{ .Name }}">
-            <a href="{{ .URL }}" class="menu__items__item__link {{ if $current.IsMenuCurrent "main" . }}active{{ end }}"
+            <a href="{{ .URL }}" class="menu__items__item__link {{ if or ($current.IsMenuCurrent "main" .) ($current.HasMenuCurrent "main" .) }}active{{ end }}"
                 alt="{{ .Name }}" role="menuitem">
-                {{ .Name }}
+                {{ .Name }}{{ if .HasChildren }}&nbsp;<span class="drop-icon" for="{{ .Name }}">▾</span>{{ end }}
             </a>
+	  {{ if .HasChildren }}
+	    <ul class="submenu__list">
+	    {{ range .Children }}
+	      <li class="menu__items__item">
+		<a class="menu__items__item__link {{ if $current.IsMenuCurrent "main" . }}active{{ end }}" href="{{ .URL }}">{{ .Name }}</a>
+	      </li>
+	    {{ end }}
+	    </ul>
+	  {{ end }}
         </li>
         {{ end }}
     </ul>
-</nav>
\ No newline at end of file
+</nav>