feat: #9967, allow dropdowns in navigation

public/language/en-GB/admin/settings/navigation.json

@@ -11,6 +11,8 @@
 	"properties": "Properties:",
 	"groups": "Groups:",
 	"open-new-window": "Open in a new window",
+	"dropdown": "Dropdown",
+	"dropdown-placeholder": "Place your dropdown menu items below, ie: <br/>&lt;li&gt;&lt;a href&#x3D;&quot;https://myforum.com&quot;&gt;Link 1&lt;/a&gt;&lt;/li&gt;",
 
 	"btn.delete": "Delete",
 	"btn.disable": "Disable",
@@ -20,4 +22,4 @@
 	"custom-route": "Custom Route",
 	"core": "core",
 	"plugin": "plugin"
-}
+}

public/src/app.js

@@ -284,9 +284,12 @@ app.cacheBuster = null;
 		$('#main-nav li')
 			.removeClass('active')
 			.find('a')
-			.filter(function (i, x) {
+			.filter(function (i, a) {
-				return window.location.hostname === x.hostname && (window.location.pathname === x.pathname ||
+				return $(a).attr('href') !== '#' && window.location.hostname === a.hostname &&
-					window.location.pathname.startsWith(x.pathname + '/'));
+					(
+						window.location.pathname === a.pathname ||
+						window.location.pathname.startsWith(a.pathname + '/')
+					);
 			})
 			.parent()
 			.addClass('active');

src/controllers/admin/settings.js

@@ -1,5 +1,7 @@
 'use strict';
 
+const validator = require('validator');
+
 const meta = require('../../meta');
 const emailer = require('../../emailer');
 const notifications = require('../../notifications');
@@ -72,6 +74,7 @@ settingsController.navigation = async function (req, res) {
 		enabled.selected = index === 0;
 		enabled.title = translator.escape(enabled.title);
 		enabled.text = translator.escape(enabled.text);
+		enabled.dropdownContent = translator.escape(validator.escape(String(enabled.dropdownContent || '')));
 		enabled.groups = admin.groups.map(group => ({
 			displayName: group.displayName,
 			selected: enabled.groups.includes(group.name),

src/views/admin/settings/navigation.tpl

@@ -89,6 +89,19 @@
 						</label>
 					</div>
 
+					<div class="checkbox">
+						<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
+							<input class="mdl-switch__input" type="checkbox" name="dropdown" {{{ if enabled.dropdown }}}checked{{{ end }}}/>
+							<span class="mdl-switch__label"><strong>[[admin/settings/navigation:dropdown]]</strong></span>
+						</label>
+					</div>
+					<div>
+						<p class="help-block">
+							[[admin/settings/navigation:dropdown-placeholder]]
+						</p>
+						<textarea name="dropdownContent" rows="5" class="form-control">{enabled.dropdownContent}</textarea>
+					</div>
+
 					<button class="btn btn-danger delete">[[admin/settings/navigation:btn.delete]]</button>
 					<!-- IF enabled.enabled -->
 					<button class="btn btn-warning toggle">[[admin/settings/navigation:btn.disable]]</button>