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

@@ -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;

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": [
-			[
-				"⌛ Page History",
-				"?action=history&page={page}"
-			],
-			[
-				"📤 Upload",
-				"index.php?action=upload"
-			]
-		],
-		"Navigation": [
-			[
-				"🎫 All Tags",
-				"index.php?action=list-tags"
-			],
-			[
-				"🎊 Random Page",
-				"?action=random"
-			],
-			[
-				"📅 Recent changes",
-				"?action=recent-changes"
-			]
-		],
-		"Wiki": [
-			[
-				"📊 Statistics",
-				"?action=stats"
-			],
-			[
-				"👥 All Users",
-				"index.php?action=user-list"
-			]
-		],
 		"Moderator": [
 			[
 				"◆ 🚫 Delete",
@@ -121,6 +87,40 @@
 				"◆ 🔧 Edit master settings",
 				"index.php?action=configure"
 			]
+		],
+		"Wiki": [
+			[
+				"📊 Statistics",
+				"?action=stats"
+			],
+			[
+				"👥 All Users",
+				"index.php?action=user-list"
+			]
+		],
+		"Navigation": [
+			[
+				"🎫 All Tags",
+				"index.php?action=list-tags"
+			],
+			[
+				"🎊 Random Page",
+				"?action=random"
+			],
+			[
+				"📅 Recent changes",
+				"?action=recent-changes"
+			]
+		],
+		"Page": [
+			[
+				"⌛ Page History",
+				"?action=history&page={page}"
+			],
+			[
+				"📤 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": [

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); }
+.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 { display: block; box-shadow: 0.4rem 0.4rem 1rem 0 var(--shadow); }
+input[type=checkbox]:checked ~ .nav-more-menu { right: -0.2rem; box-shadow: 0.4rem 0.4rem 1rem 0 var(--shadow); }
-.nav-more-menu span { min-width: 10rem; }
+.nav-more-menu span { white-space: nowrap; }
 
 .inflexible { flex: none; }
 .off-screen { position: absolute; top: -1000px; left: -1000px;}