From 55115228f22c41ac8768aa1fe6b1a294319d79a8 Mon Sep 17 00:00:00 2001
From: Michael Fabian 'Xaymar' Dirks <info@xaymar.com>
Date: Sun, 6 Mar 2022 06:40:26 +0100
Subject: [PATCH] Improve Navigation

---
 _includes/navigation.liquid |   8 +--
 _sass/_header.scss          | 139 ++++++++++++++++++++++++++----------
 2 files changed, 104 insertions(+), 43 deletions(-)

diff --git a/_includes/navigation.liquid b/_includes/navigation.liquid
index 7e1f14b..e1ce1fb 100644
--- a/_includes/navigation.liquid
+++ b/_includes/navigation.liquid
@@ -1,6 +1,10 @@
 <ul class="menu">
 {% for entry in include.data %}
 	<li id="{{ entry[0] }}" class="entry {% if entry[1].entries != nil %}has-menu {% endif %}">
+	{% if entry[1].entries != nil %}
+		{% assign data=entry[1].entries %}
+		{% include navigation.liquid data=data %}
+	{% endif %}
 	{% if entry[1].url != nil %}
 		<a class="item" href="{{ entry[1].url | absolute_url }}" {% if entry[1].blank %}target="_blank"{% endif %}>
 	{% else %}
@@ -12,10 +16,6 @@
 	{% else %}
 		</span>
 	{% endif %}
-	{% if entry[1].entries != nil %}
-		{% assign data=entry[1].entries %}
-		{% include navigation.liquid data=data %}
-	{% endif %}
 	</li>
 {% endfor %}
 </ul>
diff --git a/_sass/_header.scss b/_sass/_header.scss
index 22b354e..59a1357 100644
--- a/_sass/_header.scss
+++ b/_sass/_header.scss
@@ -148,19 +148,111 @@
 		align-self: center;
 	}
 
+	/* Menu - Base Style */
+	#navigation .menu {
+		/* Menu - Menu Style */
+		position: absolute;
+		margin: 0;
+		padding: .25em .25em;
+		z-index: 1;
+
+		background: $theme-menu-background;
+		box-shadow: 2px 2px 5px 2px black;
+
+		text-transform: none;
+	}
+
+	#navigation .menu > .entry {
+		/* Menu - Entry Style */
+		display: block;
+		margin: 0;
+		padding: 0;
+
+		cursor: default;
+	}
+
+	#navigation .menu > .entry > span,
+	#navigation .menu > .entry > a {
+		/* Menu - Link Style */
+		display: block;
+		padding: .67em .67em;
+		white-space: nowrap;
+
+		cursor: pointer;
+	}
+	#navigation .menu > .entry > span {
+		cursor: default;
+	}
+
+	#navigation .has-menu > .menu {
+		/* Menu - Sub-menu Style */
+		position: absolute;
+		display: none;
+		min-width: 5em;
+
+		pointer-events: none;
+
+		animation-name: menu_hide;
+		animation-duration: 100ms;
+		animation-fill-mode: both;
+		animation-direction: reverse;
+	}
+	#navigation .has-menu:hover > .menu,
+	#navigation .has-menu > .menu:hover,
+	#navigation .has-menu:focus > .menu,
+	#navigation .has-menu > .menu:focus,
+	#navigation .has-menu:active > .menu,
+	#navigation .has-menu > .menu:active {
+		display: block;
+
+		pointer-events: auto;
+
+		animation-name: menu_show;
+		animation-duration: 100ms;
+		animation-fill-mode: both;
+		animation-direction: normal;
+	}
+
+	#navigation .has-menu > .menu > .has-menu > span:after,
+	#navigation .has-menu > .menu > .has-menu > a:after {
+		/* Menu - Entry with Sub-Menu inside of Top-Level Menu */
+		content: "❯";
+	}
+
+	#navigation .has-menu > .menu > .has-menu > .menu {
+		/* Menu - Sub-Menu in Sub-Menu */
+		left: calc(100% - .5em);
+		//right: -200px;
+
+		z-index: 2;
+	}
+
+	/* 1st Level Menu */
 	#navigation > .menu {
+		position: relative;
+		z-index: auto;
 		text-transform: uppercase;
-		padding: 0px;
-		margin: 0;
+		background: transparent;
+		box-shadow: none;
 	}
-
-	#navigation > .menu > li {
+	#navigation > .menu > .entry {
 		display: inline-block;
-		padding: 0px .5em 0px 0px;
+		padding: 0;
 		margin: 0;
 	}
+	#navigation > .menu > .has-menu > .menu {
+		top: 1.33em;
+	}
+	#navigation > .menu > .entry > span,
+	#navigation > .menu > .entry > a {
+		padding: 0 .5em 0 0;
+	}
 
-	#navigation > .menu > li > .menu {
+
+	/* Menu with Menu
+
+
+	#navigation .menu > li > .menu {
 		display: block;
 		position: absolute;
 		padding: 0px .5em;
@@ -170,42 +262,11 @@
 		box-shadow: 2px 2px 5px 0px black;
 	}
 
-	#navigation > .menu > li > .menu > li {
+	#navigation .menu > li > .menu > li {
 		display: block;
 		padding: 0 .5em;
 		margin: 0;
 	}
+	*/
 
-	#navigation .menu > li > a {
-		display: block;
-		padding: .5em 0;
-	}
-
-	#navigation .menu li.has-menu {
-		cursor: pointer;
-	}
-
-	#navigation .menu li.has-menu > .menu {
-		position: absolute;
-		pointer-events: none;
-		display: block;
-		animation-name: menu_hide;
-		animation-duration: 100ms;
-		animation-fill-mode: both;
-		animation-direction: reverse;
-	}
-
-	#navigation .menu li.has-menu:hover > .menu,
-	#navigation .menu li.has-menu > .menu:hover,
-	#navigation .menu li.has-menu:focus > .menu,
-	#navigation .menu li.has-menu > .menu:focus,
-	#navigation .menu li.has-menu:active > .menu,
-	#navigation .menu li.has-menu > .menu:active {
-		display: block;
-		pointer-events: auto;
-		animation-name: menu_show;
-		animation-duration: 100ms;
-		animation-fill-mode: both;
-		animation-direction: normal;
-	}
 }