fix: #10528, gray out disabled nav items

use enabled property if present
change default to true, so added nav items are enabled by default

public/src/admin/settings/navigation.js

@@ -70,9 +70,12 @@ define('admin/settings/navigation', [
 	function drop(ev, ui) {
 		const id = ui.helper.attr('data-id');
 		const el = $('#active-navigation [data-id="' + id + '"]');
-		const data = id === 'custom' ? { iconClass: 'fa-navicon', groups: available[0].groups } : available[id];
+		const data = id === 'custom' ? {
+			iconClass: 'fa-navicon',
+			groups: available[0].groups,
+			enabled: true,
+		} : available[id];
 
-		data.enabled = false;
 		data.index = (parseInt($('#enabled').children().last().attr('data-index'), 10) || 0) + 1;
 		data.title = translator.escape(data.title);
 		data.text = translator.escape(data.text);
@@ -141,9 +144,11 @@ define('admin/settings/navigation', [
 	function toggle() {
 		const btn = $(this);
 		const disabled = btn.hasClass('btn-success');
+		const index = btn.parents('[data-index]').attr('data-index');
 		translator.translate(disabled ? '[[admin/settings/navigation:btn.disable]]' : '[[admin/settings/navigation:btn.enable]]', function (html) {
 			btn.toggleClass('btn-warning').toggleClass('btn-success').html(html);
 			btn.parents('li').find('[name="enabled"]').val(disabled ? 'on' : '');
+			$('#active-navigation [data-index="' + index + '"] a').toggleClass('text-muted', !disabled);
 		});
 		return false;
 	}

src/navigation/admin.js

@@ -92,7 +92,13 @@ async function getAvailable() {
 		return item;
 	});
 
-	return await plugins.hooks.fire('filter:navigation.available', core);
+	const navItems = await plugins.hooks.fire('filter:navigation.available', core);
+	navItems.forEach((item) => {
+		if (item && !item.hasOwnProperty('enabled')) {
+			item.enabled = true;
+		}
+	});
+	return navItems;
 }
 
 require('../promisify')(admin);

src/views/admin/settings/navigation.tpl

@@ -4,7 +4,7 @@
 			<ul id="active-navigation" class="nav navbar-nav">
 				<!-- BEGIN navigation -->
 				<li data-index="{navigation.index}" class="{navigation.class} {{{ if navigation.selected }}} active {{{ end }}}">
-					<a href="#" title="{navigation.route}" id="{navigation.id}">
+					<a href="#" title="{navigation.route}" id="{navigation.id}" class="{{{ if !navigation.enabled }}}text-muted{{{ end }}}">
 						<i class="nav-icon fa fa-fw {{{ if navigation.iconClass }}}{navigation.iconClass}{{{ end }}}"></i><i class="dropdown-icon fa fa-caret-down{{{ if !navigation.dropdown }}} hidden{{{ end }}}"></i>
 					</a>
 				</li>
@@ -18,6 +18,17 @@
 			{{{ each enabled }}}
 			<li data-index="{enabled.index}" class="well <!-- IF !enabled.selected -->hidden<!-- ENDIF !enabled.selected -->">
 				<form>
+					<div class="row">
+						<div class="col-sm-12 text-right">
+							{{{ if enabled.enabled }}}
+							<button class="btn btn-warning toggle">[[admin/settings/navigation:btn.disable]]</button>
+							{{{ else }}}
+							<button class="btn btn-success toggle">[[admin/settings/navigation:btn.enable]]</button>
+							{{{ end }}}
+							<button class="btn btn-danger delete">[[admin/settings/navigation:btn.delete]]</button>
+							<input type="hidden" name="enabled" value="{{{ if enabled.enabled }}}on{{{ end}}}" />
+						</div>
+					</div>
 					<div class="row">
 						<div class="col-sm-1">
 							<div class="form-group">
@@ -101,14 +112,6 @@
 						</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>
-					<!-- ELSE -->
-					<button class="btn btn-success toggle">[[admin/settings/navigation:btn.enable]]</button>
-					<!-- ENDIF enabled.enabled -->
-					<input type="hidden" name="enabled" value="{enabled.enabled}" />
 				</form>
 			</li>
 			{{{ end }}}