show a basic spinner while the app is loading all the js files/series list.

UI/.idea/dictionaries/Keivan_Beigi.xml

@@ -7,6 +7,7 @@
       <w>couldn</w>
       <w>mouseenter</w>
       <w>mouseleave</w>
+      <w>navbar</w>
     </words>
   </dictionary>
 </component>

UI/Content/menu.less

@@ -10,15 +10,15 @@
   }
 }
 
-#in-sub-nav li a {
+#nav-region li a {
   color : #b9b9b9;
 }
 
-#in-sub-nav li a:focus {
+#nav-region li a:focus {
   text-decoration : none;
 }
 
-#in-sub-nav {
+#nav-region {
   margin-bottom : 80px;
 
   .span12 {
@@ -33,7 +33,38 @@
   }
 }
 
-.backdrop #in-sub-nav {
+.backdrop #nav-region {
   background-color : #000000;
   .opacity(0.85);
 }
+
+#nav-region li a:hover, #in-sub-nav li a.active {
+  background-color : #555555;
+  text-decoration  : none;
+}
+
+#nav-region {
+  ul {
+    text-align    : center;
+    margin-bottom : 10px;
+  }
+  li {
+    list-style-type : none;
+    display         : inline-block;
+    a {
+      display       : block;
+      border-radius : 6px;
+      padding       : 15px 10px 5px;
+      min-height    : 56px;
+      min-width     : 64px;
+      margin        : 20px 10px 10px;
+      color         : #ffffff;
+      font-weight   : 100;
+    }
+    span.label.pull-right {
+      position : relative;
+      top      : 24px;
+      right    : 14px;
+    }
+  }
+}

UI/Content/theme.less

@@ -57,10 +57,7 @@ footer {
   color : rgba(255, 255, 255, 0.8);
 }
 
-#in-sub-nav li a:hover, #in-sub-nav li a.active {
+
-  background-color : #555555;
-  text-decoration  : none;
-}
 
 body h1, body h2, body h3, body h4, body h5, body h6 {
   text-transform : capitalize;
@@ -81,28 +78,3 @@ body h1, body h2, body h3, body h4, body h5, body h6 {
   }
 }
 
-#in-sub-nav {
-  ul {
-    text-align    : center;
-    margin-bottom : 10px;
-  }
-  li {
-    list-style-type : none;
-    display         : inline-block;
-    a {
-      display       : block;
-      border-radius : 6px;
-      padding       : 15px 10px 5px;
-      min-height    : 56px;
-      min-width     : 64px;
-      margin        : 20px 10px 10px;
-      color         : #ffffff;
-      font-weight   : 100;
-    }
-    span.label.pull-right {
-      position : relative;
-      top      : 24px;
-      right    : 14px;
-    }
-  }
-}

UI/MainMenuView.js

@@ -1,42 +0,0 @@
-'use strict';
-define(['marionette'], function (Marionette) {
-    var MainMenuView = Marionette.ItemView.extend({
-        events: {
-            'click a': 'onClick'
-        },
-
-        onClick: function (event) {
-
-            event.preventDefault();
-
-            var target = $(event.target);
-
-            //look down for <a/>
-            var 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);
-            }
-        },
-
-        setActive: function (element) {
-            //Todo: Set active on first load
-            this.$('a').removeClass('active');
-            $(element).addClass('active');
-        },
-
-        initialize: function () {
-            this.setElement($('#main-menu-region'));
-        }
-    });
-
-    return new MainMenuView();
-
-});

UI/Navbar/NavbarTemplate.html

@@ -0,0 +1,62 @@
+<div class="container">
+    <div class="row">
+        <div class="span12">
+            <ul id="main-menu-region">
+                <div class="pull-left logo">
+                    <a href="/">
+                        <img src="/Content/Images/logo.png" alt="NzbDrone">
+                    </a>
+                </div>
+                <li>
+                    <a href="/">
+                        <i class="icon-play"></i>
+                        <br>
+                        Series
+                    </a>
+                </li>
+                <li>
+                    <a href="/calendar">
+                        <i class="icon-calendar"></i>
+                        <br>
+                        Calendar
+                    </a>
+                </li>
+                <li>
+                    <a href="history">
+                        <i class="icon-time"></i>
+                        <br>
+                        History
+                    </a>
+                </li>
+                <li>
+                    <a href="missing">
+                        <i class="icon-warning-sign"></i>
+                        <br>
+                        Missing
+                    </a>
+                </li>
+                <li>
+                    <a href="settings">
+                        <i class="icon-cogs"></i>
+                        <br>
+                        Settings
+                    </a>
+                </li>
+                <li>
+                    <a href="system">
+                        <i class="icon-laptop"></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-heart"></i>
+                        <br>
+                        Donate
+                    </a>
+                </li>
+            </ul>
+        </div>
+    </div>
+</div>

UI/Navbar/NavbarView.js

@@ -0,0 +1,41 @@
+'use strict';
+define(
+    [
+        'marionette'
+    ], function (Marionette) {
+        return Marionette.ItemView.extend({
+            events: {
+                'click a': 'onClick'
+            },
+
+            template : 'Navbar/NavbarTemplate',
+
+            onClick: function (event) {
+
+                event.preventDefault();
+
+                var target = $(event.target);
+
+                //look down for <a/>
+                var 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);
+                }
+            },
+
+            setActive: function (element) {
+                //Todo: Set active on first load
+                this.$('a').removeClass('active');
+                $(element).addClass('active');
+            }
+        });
+    });

UI/Router.js

@@ -5,8 +5,9 @@ require(
         'marionette',
         'Controller',
         'Series/SeriesCollection',
+        'Navbar/NavbarView',
         'jQuery/RouteBinder'
-    ], function (App, Marionette, Controller, SeriesCollection, RouterBinder) {
+    ], function (App, Marionette, Controller, SeriesCollection,NavbarView, RouterBinder) {
 
         var Router = Marionette.AppRouter.extend({
 
@@ -39,6 +40,7 @@ require(
                 .done(function(){
                     Backbone.history.start({ pushState: true });
                     RouterBinder.bind(App.Router);
+                    App.navbarRegion.show(new NavbarView());
                 })
         });
 

UI/app.js

@@ -188,6 +188,7 @@ define(
         });
 
         app.addRegions({
+            navbarRegion: '#nav-region',
             mainRegion  : '#main-region',
             footerRegion: '#footer-region'
         });

UI/index.html

@@ -17,81 +17,29 @@
     <link href="/Calendar/calendar.css" rel='stylesheet' type='text/css'/>
     <link href="/Content/overrides.css" rel='stylesheet' type='text/css'/>
 
-    <link rel="apple-touch-icon" href="/Content/Images/touch/57.png" />
+    <link rel="apple-touch-icon" href="/Content/Images/touch/57.png"/>
-    <link rel="apple-touch-icon" sizes="72x72" href="/Content/Images/touch/72.png" />
+    <link rel="apple-touch-icon" sizes="72x72" href="/Content/Images/touch/72.png"/>
-    <link rel="apple-touch-icon" sizes="114x114" href="/Content/Images/touch/114.png" />
+    <link rel="apple-touch-icon" sizes="114x114" href="/Content/Images/touch/114.png"/>
-    <link rel="apple-touch-icon" sizes="144x144" href="/Content/Images/touch/144.png" />
+    <link rel="apple-touch-icon" sizes="144x144" href="/Content/Images/touch/144.png"/>
 </head>
 <body>
-<div id="in-sub-nav">
+<div id="nav-region"></div>
-    <div class="container">
-        <div class="row">
-            <div class="span12">
-                <div class="pull-left logo">
-                    <a href="/"><img src="/Content/Images/logo.png" alt="NzbDrone"></a>
-                </div>
-                <ul id="main-menu-region">
-                    <li>
-                        <a href="/">
-                            <i class="icon-play"></i>
-                            <br>
-                            Series
-                        </a>
-                    </li>
-                    <li>
-                        <a href="/calendar">
-                            <i class="icon-calendar"></i>
-                            <br>
-                            Calendar
-                        </a>
-                    </li>
-                    <li>
-                        <a href="history">
-                            <i class="icon-time"></i>
-                            <br>
-                            History
-                        </a>
-                    </li>
-                    <li>
-                        <a href="missing">
-                            <i class="icon-warning-sign"></i>
-                            <br>
-                            Missing
-                        </a>
-                    </li>
-                    <li>
-                        <a href="settings">
-                            <i class="icon-cogs"></i>
-                            <br>
-                            Settings
-                        </a>
-                    </li>
-                    <li>
-                        <a href="system">
-                            <i class="icon-laptop"></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-heart"></i>
-                            <br>
-                            Donate
-                        </a>
-                    </li>
-                </ul>
-            </div>
-        </div>
-    </div>
-</div>
 <div class="page">
     <div class="page-container">
         <div class="container">
             <div class="row">
                 <div class="span12" id="notification-region"/>
             </div>
-            <div class="span12" id="main-region"></div>
+            <div class="span12" id="main-region">
+                <div class="row">
+                    <div id="followingBalls">
+                        <div id="ball-1" class="ball"></div>
+                        <div id="ball-2" class="ball"></div>
+                        <div id="ball-3" class="ball"></div>
+                        <div id="ball-4" class="ball"></div>
+                    </div>
+                </div>
+            </div>
             <div id="modal-region"></div>
         </div>
     </div>