acp active states for main menu

public/less/admin/header.less

@@ -10,17 +10,23 @@
 		list-style-type: none;
 		padding: 0px;
 		position: absolute;
-		bottom: 10px;
+		bottom: -10px;
 		left: 50px;
 
 		> li {
 			float: left;
 			margin-right: 30px;
 
+			&.active {
+				border-bottom: 3px solid @brand-primary;
+    			padding-bottom: 10px;
+			}
+
 			> a {
 				color: white;
 				text-transform: uppercase;
 				text-decoration: none;
+				outline: none;
 			}
 		}
 	}

public/src/admin/admin.js

@@ -93,26 +93,20 @@
 			url = 'admin/general/dashboard';
 		}
 
-		$('#main-menu .nav-list > li').removeClass('active').each(function() {
+		$('#main-menu li').removeClass('active');
+		$('#main-menu a').removeClass('active').each(function() {
 			var menu = $(this),
-				category = menu.parents('.sidebar-nav'),
-				href = menu.children('a').attr('href'),
+				href = menu.attr('href'),
 				isLink = menu.attr('data-link') === '1';
 
 			if (!isLink && href && href.slice(1) === url) {
-				category.addClass('open');
-				menu.addClass('active');
-				modifyBreadcrumb(category.find('.nav-header').text(), menu.text());
+				menu
+					.parent().addClass('active')
+					.parents('.menu-item').addClass('active');
 			}
 		});
 	}
 
-	function modifyBreadcrumb() {
-		var caret = ' <i class="fa fa-angle-right"></i> ';
-
-		$('#breadcrumbs').html(caret + Array.prototype.slice.call(arguments).join(caret));
-	}
-
 	function setupRestartLinks() {
 		$('.restart').off('click').on('click', function() {
 			bootbox.confirm('Are you sure you wish to restart NodeBB?', function(confirm) {

src/views/admin/partials/menu.tpl

@@ -1,9 +1,9 @@
 <nav class="header">
-	<ul>
-		<li>
+	<ul id="main-menu">
+		<li class="menu-item">
 			<a href="{relative_path}/admin/general/dashboard">Dashboard</a>
 		</li>
-		<li class="dropdown">
+		<li class="dropdown menu-item">
 			<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">General</a>
 			<ul class="dropdown-menu" role="menu">
 				<li><a href="{relative_path}/admin/general/homepage">Home Page</a></li>
@@ -12,7 +12,7 @@
 				<li><a href="{relative_path}/admin/general/sounds">Sounds</a></li>
 			</ul>
 		</li>
-		<li class="dropdown">
+		<li class="dropdown menu-item">
 			<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Manage</a>
 			<ul class="dropdown-menu" role="menu">
 				<li><a href="{relative_path}/admin/manage/categories">Categories</a></li>
@@ -22,7 +22,7 @@
 				<li><a href="{relative_path}/admin/manage/flags">Flags</a></li>
 			</ul>
 		</li>
-		<li class="dropdown">
+		<li class="dropdown menu-item">
 			<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Settings</a>
 			<ul class="dropdown-menu" role="menu">
 				<li><a href="{relative_path}/admin/settings/general">General</a></li>
@@ -40,7 +40,7 @@
 				<li><a href="{relative_path}/admin/settings/advanced">Advanced</a></li>
 			</ul>
 		</li>
-		<li class="dropdown">
+		<li class="dropdown menu-item">
 			<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Appearance</a>
 			<ul class="dropdown-menu" role="menu">
 				<li><a href="{relative_path}/admin/appearance/themes">Themes</a></li>
@@ -48,7 +48,7 @@
 				<li><a href="{relative_path}/admin/appearance/customise">Custom HTML &amp; CSS</a></li>
 			</ul>
 		</li>
-		<li class="dropdown">
+		<li class="dropdown menu-item">
 			<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Extend</a>
 			<ul class="dropdown-menu" role="menu">
 				<li><a href="{relative_path}/admin/extend/plugins">Plugins</a></li>
@@ -57,7 +57,7 @@
 			</ul>
 		</li>
 		<!-- IF authentication.length -->
-		<li class="dropdown">
+		<li class="dropdown menu-item">
 			<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Social Authentication</a>
 			<ul class="dropdown-menu" role="menu">
 				<!-- BEGIN authentication -->
@@ -69,7 +69,7 @@
 		</li>
 		<!-- ENDIF authentication.length -->
 		<!-- IF plugins.length -->
-		<li class="dropdown">
+		<li class="dropdown menu-item">
 			<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Plugins</a>
 			<ul class="dropdown-menu" role="menu">
 				<!-- BEGIN plugins -->
@@ -84,7 +84,7 @@
 			</ul>
 		</li>
 		<!-- ENDIF plugins.length -->
-		<li class="dropdown">
+		<li class="dropdown menu-item">
 			<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Advanced</a>
 			<ul class="dropdown-menu" role="menu">
 				<li><a href="{relative_path}/admin/advanced/database">Database</a></li>