drag & drop routes

public/less/admin/general/navigation.less

@@ -2,5 +2,9 @@
 	ul {
 		list-style-type: none;
 		padding: 0;
+
+		li {
+			cursor: move;
+		}
 	}
 }

public/src/admin/general/navigation.js

@@ -25,8 +25,31 @@ define('admin/general/navigation', function() {
 
 		$('#save').on('click', saveNavigation);
 
-		$('#enabled').sortable();
+		$('#enabled')
-		$('#enabled').disableSelection();
+			.sortable()
+			.droppable({
+				accept: $('#available li')
+			})
+			.disableSelection();
+
+		$('#available li')
+			.draggable({
+				connectToSortable: '#enabled',
+				helper: 'clone',
+				distance: 10,
+				stop: function(ev, ui) {
+					var id = ui.helper.attr('data-id'),
+						el = $('#enabled [data-id="' + id + '"]'),
+						data = id === 'custom' ? {} : available[id];
+
+					templates.parse('admin/general/navigation', 'enabled', {enabled: [data]}, function(li) {
+						li = $(li);
+						el.after(li);
+						el.remove();
+					});
+				}
+			})
+			.disableSelection();
 	};
 
 	function saveNavigation() {
@@ -58,5 +81,13 @@ define('admin/general/navigation', function() {
 		});
 	}
 
+	function getDefaultsByRoute(route) {
+		available.forEach(function(item) {
+			if (item.route.match(route)) {
+				return item;
+			}
+		});
+	}
+
 	return navigation;
 });

src/views/admin/general/navigation.tpl

@@ -45,8 +45,8 @@
 		<div class="panel panel-default">
 			<div class="panel-heading">Available Menu Items</div>
 			<div class="panel-body">
-				<ul id="active">
+				<ul id="available">
-					<li data-id="Custom" class="alert alert-warning">
+					<li data-id="custom" class="alert alert-warning">
 						<strong>Custom Route</strong>
 					</li>
 					<!-- BEGIN available -->