main menu now uses backbone to handle navigation. no more reload.

NzbDrone.Backbone/Content/menu.css

@@ -1,7 +1,7 @@
-#main-menu i:before {
+#main-menu-region i:before {
     font-size: 35px;
 }
 
-#main-menu i {
+#main-menu-region i {
     width: 40px;
 }

NzbDrone.Backbone/Controller.js

@@ -1,6 +1,6 @@
 define(['app', 'Shared/ModalRegion', 'AddSeries/AddSeriesLayout', 'Series/SeriesCollectionView',
         'Upcoming/UpcomingCollectionView', 'Calendar/CalendarCollectionView', 'Shared/NotificationView',
-        'Shared/NotFoundView'], function (app, modalRegion) {
+        'Shared/NotFoundView', 'MainMenuView'], function (app, modalRegion) {
 
     var controller = Backbone.Marionette.Controller.extend({
 
@@ -43,7 +43,7 @@
         }
     });
 
-
+    //Modal dialog initializer
     NzbDrone.addInitializer(function () {
 
         NzbDrone.addRegions({ modalRegion: modalRegion });
@@ -59,7 +59,7 @@
         });
 
     });
-
+            
     return new controller();
 
 });

NzbDrone.Backbone/Index.html

@@ -44,7 +44,7 @@
         <div class="container">
             <div class="row">
                 <div class="span12">
-                    <ul id="main-menu">
+                    <ul id="main-menu-region">
                         <li><a href="/"><i class="icon-film"></i>
                             <br>
                             Series</a></li>
@@ -58,7 +58,7 @@
                         <li><a href="settings"><i class="icon-cogs"></i>
                             <br>
                             Settings</a></li>
-                        <li><a href="system" class="active"><i class="icon-plane"></i>
+                        <li><a href="system"><i class="icon-plane"></i>
                             <br>
                             System</a></li>
                         <li><a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=KRTE52U3XJDSQ" target="_blank"><i class="icon-star"></i>
@@ -80,7 +80,7 @@
                 </div>
                 <div class="span12" id="main-region"></div>
             </div>
-    </div>
+        </div>
     </div>
     <footer>
         <div class="container">

NzbDrone.Backbone/MainMenuView.js

@@ -0,0 +1,56 @@
+define(['app'], function () {
+    NzbDrone.MainMenuView = Backbone.Marionette.ItemView.extend({
+        ui: {
+            seriesSearch: '.search input'
+        },
+
+        events: {
+            'click a': 'onClick'
+        },
+
+
+        onClick: function (event) {
+
+            event.preventDefault();
+
+            var target = $(event.target);
+            var href = undefined;
+
+            //look down for <a/>
+            href = event.target.getAttribute('href');
+
+            //if couldn't find it look up 
+            if (!href && target.parent('a') && target.parent('a')[0]) {
+
+                var linkElement = target.parent('a')[0];
+
+                href = linkElement.getAttribute('href');
+                this.setActive(linkElement);
+            } else {
+                this.setActive(event.target);
+            }
+
+            if (href && href.startsWith('http')) {
+                window.location.href = href;
+            } else {
+                NzbDrone.Router.navigate(href, { trigger: true, replace: true });
+            }
+
+        },
+
+
+        setActive: function (element) {
+            this.$('a').removeClass('active');
+            $(element).addClass('active');
+        },
+
+
+        initialize: function () {
+            console.log('menue');
+            this.setElement($('#main-menu-region'));
+        }
+    });
+
+
+    return new NzbDrone.MainMenuView();
+});

NzbDrone.Backbone/NzbDrone.Backbone.csproj

@@ -29,6 +29,7 @@
     <WarningLevel>4</WarningLevel>
   </PropertyGroup>
   <ItemGroup>
+    <Content Include="MainMenuView.js" />
     <Content Include="AddSeries\addSeries.css" />
     <Content Include="AddSeries\AddSeriesLayout.js" />
     <Content Include="AddSeries\addSeriesLayoutTemplate.html" />