From 4e3426644c09ef7613045f1186a051a9a973440f Mon Sep 17 00:00:00 2001
From: Starbeamrainbowlabs <sbrl@starbeamrainbowlabs.com>
Date: Fri, 30 Aug 2019 00:41:25 +0100
Subject: [PATCH] Style the new mega-menu option.

It still needs more testing though - e.g. to ensure we haven't broken
the existing setup :P
---
 core/40-page-renderer.php |  2 --
 peppermint.guiconfig.json | 68 +++++++++++++++++++--------------------
 themes/default/theme.css  | 20 ++++++++----
 3 files changed, 48 insertions(+), 42 deletions(-)

diff --git a/core/40-page-renderer.php b/core/40-page-renderer.php
index 43f47f2..969cc1c 100644
--- a/core/40-page-renderer.php
+++ b/core/40-page-renderer.php
@@ -426,7 +426,6 @@ class page_renderer
 		}
 		
 		$result = "<nav class='$class'>\n";
-		if($mega_menu) $result .= "<span class='category'>";
 		$is_first_category = true;
 		// Loop over all the navigation links
 		foreach($nav_links as $item) {
@@ -477,7 +476,6 @@ class page_renderer
 					break;
 				
 				case "category": // Renders a category header
-					error_log("[category] " . substr($item, 9));
 					if(!$is_first_category) $result .= "</span>";
 					$result .= "<span class='category'><strong>" . substr($item, 9) . "</strong>";
 					$is_first_category = false;
diff --git a/peppermint.guiconfig.json b/peppermint.guiconfig.json
index 1e8e9cb..aba8169 100644
--- a/peppermint.guiconfig.json
+++ b/peppermint.guiconfig.json
@@ -70,40 +70,6 @@
 		"menu"
 	]},
 	"nav_links_extra": { "type": "nav", "description": "An array of additional links in the above format that will be shown under \"More\" subsection.", "default": {
-		"Page": [
-			[
-				"&#x231b; Page History",
-				"?action=history&page={page}"
-			],
-			[
-				"&#x1f4e4; Upload",
-				"index.php?action=upload"
-			]
-		],
-		"Navigation": [
-			[
-				"&#x1f3ab; All&nbsp;Tags",
-				"index.php?action=list-tags"
-			],
-			[
-				"&#x1f38a; Random Page",
-				"?action=random"
-			],
-			[
-				"&#x1f4c5; Recent changes",
-				"?action=recent-changes"
-			]
-		],
-		"Wiki": [
-			[
-				"&#x1f4ca; Statistics",
-				"?action=stats"
-			],
-			[
-				"&#x1f465; All Users",
-				"index.php?action=user-list"
-			]
-		],
 		"Moderator": [
 			[
 				"&#9670; &#x1f6ab; Delete",
@@ -121,6 +87,40 @@
 				"&#9670; &#x1f527; Edit master settings",
 				"index.php?action=configure"
 			]
+		],
+		"Wiki": [
+			[
+				"&#x1f4ca; Statistics",
+				"?action=stats"
+			],
+			[
+				"&#x1f465; All Users",
+				"index.php?action=user-list"
+			]
+		],
+		"Navigation": [
+			[
+				"&#x1f3ab; All&nbsp;Tags",
+				"index.php?action=list-tags"
+			],
+			[
+				"&#x1f38a; Random Page",
+				"?action=random"
+			],
+			[
+				"&#x1f4c5; Recent changes",
+				"?action=recent-changes"
+			]
+		],
+		"Page": [
+			[
+				"&#x231b; Page History",
+				"?action=history&page={page}"
+			],
+			[
+				"&#x1f4e4; Upload",
+				"index.php?action=upload"
+			]
 		]
 	} },
 	"nav_links_bottom": { "type": "nav", "description": "An array of links in the above format that will be shown at the bottom of the page.", "default": [
diff --git a/themes/default/theme.css b/themes/default/theme.css
index 82878dc..c2d6904 100644
--- a/themes/default/theme.css
+++ b/themes/default/theme.css
@@ -58,16 +58,24 @@ nav { display: flex; background-color: var(--accent-a2); color: var(--accent-b1)
 nav.top { position: absolute; top: 0; left: 0; right: 0; box-shadow: inset 0 -0.6rem 0.8rem -0.5rem var(--shadow); }
 nav.bottom { position: absolute; left: 0; right: 0; box-shadow: inset 0 0.8rem 0.8rem -0.5rem var(--shadow); }
 
-nav > span { flex: 1; line-height: 2; display: inline-block; margin: 0; padding: 0.3rem 0.5rem; border-left: 3px solid var(--accent-a3); border-right: 3px solid var(--accent-a3); }
+nav.mega-menu { display: flex; flex-direction: row; padding-bottom: 0.4em; border-left: 3px solid var(--accent-a3); border-right: 3px solid var(--accent-a3); }
+nav.mega-menu .category { padding: 0.3em 1em; }
+nav.mega-menu strong { display: block; }
+nav.mega-menu span { display: block; }
+
+nav > span { flex: 1; line-height: 2; display: inline-block; margin: 0; padding: 0.3rem 0.5rem; }
+nav:not(.mega-menu) > span { border-left: 3px solid var(--accent-a3); border-right: 3px solid var(--accent-a3); }
 nav:not(.nav-more-menu) > span { text-align: center; }
-nav:not(.nav-more-menu) a { text-decoration: none; font-weight: bolder; color: inherit; }
+nav:not(.nav-more-menu) a { text-decoration: none; color: inherit; }
+nav:not(.nav-more-menu):not(.mega-menu) > span > a { font-weight: bolder; }
 .nav-divider { color: transparent; }
 
-.nav-more { position: relative; background-color: var(--accent-a3); min-width: 10em; font-weight: bold; }
+.nav-more { position: relative; background-color: var(--accent-a3); min-width: 10em; }
+.nav-more > label { font-weight: bold; }
 label { cursor: pointer; }
-.nav-more-menu { display: none; z-index: 10000; position: absolute; flex-direction: column; top: 2.6rem; right: -0.2rem; text-align: left; background-color: var(--accent-a2); border-top: 3px solid var(--accent-a3); border-bottom: 3px solid var(--accent-a3); }
-input[type=checkbox]:checked ~ .nav-more-menu { display: block; box-shadow: 0.4rem 0.4rem 1rem 0 var(--shadow); }
-.nav-more-menu span { min-width: 10rem; }
+.nav-more-menu { z-index: 10000; position: absolute; flex-direction: column; top: 2.6rem; right: 100000px; text-align: left; background-color: var(--accent-a2); border-top: 3px solid var(--accent-a3); border-bottom: 3px solid var(--accent-a3); }
+input[type=checkbox]:checked ~ .nav-more-menu { right: -0.2rem; box-shadow: 0.4rem 0.4rem 1rem 0 var(--shadow); }
+.nav-more-menu span { white-space: nowrap; }
 
 .inflexible { flex: none; }
 .off-screen { position: absolute; top: -1000px; left: -1000px;}
