some more acp/nav fixes

public/less/admin/general/navigation.less

@@ -1,15 +1,33 @@
-#main-nav {
-	.active {
-		background-color: #eee;
+
+
+#navigation {
+
+	#main-nav {
+		.active {
+			background-color: #eee;
+		}
+
+		li a {
+			cursor: move;
+		}
 	}
 
-	li {
-		cursor: move;
+	#available {
+		.drag-item {
+			cursor: move;
+			margin-right: 10px;
+		}
 	}
-}
-#navigation {
+
+	#enabled {
+		.iconPicker i {
+			cursor: pointer;
+		}
+	}
+
 	ul {
 		list-style-type: none;
 		padding: 0;
 	}
-}
+}
+

public/src/admin/general/navigation.js

@@ -14,7 +14,7 @@ define('admin/general/navigation', ['translator', 'iconSelect'], function(transl
 
 		translator.translate(translator.unescape($('#available').html()), function(html) {
 			$('#available').html(html)
-				.find('li').draggable({
+				.find('li .drag-item').draggable({
 					connectToSortable: '#main-nav',
 					helper: 'clone',
 					distance: 10,
@@ -23,7 +23,7 @@ define('admin/general/navigation', ['translator', 'iconSelect'], function(transl
 		});
 
 		$('#main-nav').sortable().droppable({
-			accept: $('#available li')
+			accept: $('#available li .drag-item')
 		});
 
 		$('#enabled').on('click', '.iconPicker', function() {
@@ -50,7 +50,7 @@ define('admin/general/navigation', ['translator', 'iconSelect'], function(transl
 		$('#main-nav li').removeClass('active');
 		$(this).addClass('active');
 
-		var detailsForm = $('#enabled').children().eq(clickedIndex);
+		var detailsForm = $('#enabled').children('[data-index="' + clickedIndex + '"]');
 		$('#enabled li').addClass('hidden');
 
 		if (detailsForm.length) {
@@ -65,7 +65,7 @@ define('admin/general/navigation', ['translator', 'iconSelect'], function(transl
 			data = id === 'custom' ? {iconClass: 'fa-navicon'} : available[id];
 
 		data.enabled = false;
-		data.index = Math.max(0, $('#main-nav').children().length - 1);
+		data.index = parseInt($('#enabled').children().last().attr('data-index'), 10) + 1;
 
 		templates.parse('admin/general/navigation', 'navigation', {navigation: [data]}, function(li) {
 			li = $(translator.unescape(li));
@@ -88,7 +88,7 @@ define('admin/general/navigation', ['translator', 'iconSelect'], function(transl
 		});
 
 		indices.forEach(function(index) {
-			var el = $('#enabled').children().eq(index);
+			var el = $('#enabled').children('[data-index="' + index + '"]');
 			var form = el.find('form').serializeArray(),
 				data = {},
 				properties = {};

src/views/admin/general/navigation.tpl

@@ -109,13 +109,21 @@
 			<div class="panel-heading">Available Menu Items</div>
 			<div class="panel-body">
 				<ul id="available">
-					<li data-id="custom" class="alert alert-warning">
+					<li data-id="custom" class="clearfix">
+						<div data-id="custom" class="drag-item alert alert-warning pull-left">
+							<i class="fa fa-fw fa-navicon"></i>
+						</div>
 						<strong>Custom Route</strong>
 					</li>
 					<!-- BEGIN available -->
-					<li data-id="@index" class="alert <!-- IF available.core -->alert-info<!-- ELSE -->alert-success<!-- ENDIF available.core -->">
-						<strong>{available.text}</strong> {available.route}
-						<span class="pull-right badge"><!-- IF available.core -->core<!-- ELSE -->plugin<!-- ENDIF available.core --></span>
+					<li data-id="@index" class="clearfix">
+						<div data-id="@index" class="drag-item alert <!-- IF available.core -->alert-info<!-- ELSE -->alert-success<!-- ENDIF available.core --> pull-left">
+							<i class="fa fa-fw <!-- IF available.iconClass -->{available.iconClass}<!-- ELSE -->fa-navicon<!-- ENDIF available.iconClass -->"></i>
+						</div>
+						<p>
+							<strong>{available.text}</strong> {available.route} <br/>
+							<!-- IF available.core --> core <!-- ELSE --> plugin <!-- ENDIF available.core -->
+						</p>
 					</li>
 					<!-- END available -->
 				</ul>