menu update: fixed position, other changes

assets/style/main.scss

@@ -21,7 +21,7 @@ body {
 .content {
   flex: 1;
   width: 90%;
-  margin: 0 auto;
+  margin: 3em auto 0;
 }
 
 a {

assets/style/menu.scss

@@ -1,76 +1,79 @@
-header {
-  nav {
-    overflow-x: scroll;
-    -webkit-overflow-scrolling: touch;
-    width: 100%;
-    max-height: 15em;
+.main-menu {
 
-    background-color: black;
-    font-size: 1.1em;
-    color: #666;
+  position: fixed;
+  z-index: 100;
+  overflow-x: scroll;
+  -webkit-overflow-scrolling: touch;
+  width: 100%;
+  //max-height: 15em;
 
-    & :link, & :visited {
-      text-decoration: none;
-      border-bottom: 1px solid #333;
-      color: #a2a2a2;
+  background-color: black;
+  font-size: 1.1em;
+  color: #666;
+
+  list-style: none;
+  white-space: nowrap;
+
+  & :link, & :visited {
+    text-decoration: none;
+    border-bottom: 1px solid #333;
+    color: #a2a2a2;
+  }
+
+  li {
+    display: inline-block; /* 6 */
+    padding: 0.3em 0.2em 0.5em;
+    margin: 0 0.5em;
+
+    &:first-child {
+      margin-left: 1em;
     }
+  }
 
-    ul {
-      list-style: none;
-      white-space: nowrap;
+  a:hover {
+    color: white;
+    border-bottom: 1px solid #555;
+  }
 
-      li {
-        display: inline-block; /* 6 */
-        padding: 0.3em 0.2em 0.5em;
-        margin: 0 0.5em;
-      }
-    }
+  .selected {
+    border-top: 4px solid white;
+    font-weight: bold;
 
-    a:hover {
+    a:link, a:visited {
       color: white;
-      border-bottom: 1px solid #555;
+      text-decoration: none;
+      border-bottom: none;
     }
 
-    .selected {
-      border-top: 4px solid white;
-      font-weight: bold;
+    &.blue {
+      border-top: 4px solid #3f9cea;
+    }
 
-      a:link, a:visited {
-        color: white;
-        text-decoration: none;
-        border-bottom: none;
-      }
+    &.green {
+      border-top: 4px solid #5cbe40;
+    }
 
-      &.blue {
-        border-top: 4px solid #3f9cea;
-      }
+    &.yellow {
+      border-top: 4px solid #ffee00;
+    }
 
-      &.green {
-        border-top: 4px solid #5cbe40;
-      }
+    &.pink {
+      border-top: 4px solid #f655a0;
+    }
 
-      &.yellow {
-        border-top: 4px solid #ffee00;
-      }
-
-      &.pink {
-        border-top: 4px solid #f655a0;
-      }
-
-      &.red {
-        border-top: 4px solid #f61b14;
-      }
+    &.red {
+      border-top: 4px solid #f61b14;
     }
   }
 }
 
 @media (min-width: 31.25em) {
   header{
-    max-height: none;
+    //max-height: none;
     overflow: hidden;
+  }
 
-    nav ul {
-      width: 100%;
-    }
+  .main-menu {
+    width: 100%;
   }
 }

client/app.js

@@ -80,6 +80,7 @@ app.run(function ($location, $rootScope, $http) {
 
 require("./api/api")(app);
 require("./services/io")(app);
+require("./directives/mainMenu")(app);
 require("./ui/menu")(app);
 require("./ui/breadcrumbs")(app);
 require("./ui/timeline")(app);
@@ -105,4 +106,8 @@ app.controller("TeamPageController", function ($scope) {
 
 app.controller("DocsPageController", function ($scope) {
     $scope.pageClass = "page-docs";
+});
+
+app.controller("AppController", function ($scope, menu) {
+    $scope.menuProvider = menu.items;
 });

client/ui/menu.js

@@ -21,26 +21,14 @@ module.exports = function (app) {
 
         var menu = new Menu();
         $rootScope.$on('$routeChangeSuccess', function (event, current) {
-            var path = current['$$route'].originalPath;
-            menu.activate(path);
+            try{
+                var path = current['$$route'].originalPath;
+                menu.activate(path);
+            }catch(e){
+
+            }
         });
 
         return menu;
     });
-
-    app.controller("MenuController", function ($scope, menu) {
-        $scope.menu = menu;
-
-        $scope.isActive = function (item) {
-            if(menu.current) {
-                return item.url == menu.current.url;
-            }else{
-                return false;
-            }
-        };
-
-        $scope.isValid = function (item) {
-            return 'url' in item;
-        };
-    });
 };

templates/main.html

@@ -44,16 +44,9 @@
     </script>
 </head>
 <body>
-<div class="wrapper">
+<div class="wrapper" ng-controller="AppController">
     <header>
-        <nav role="navigation" ng-controller="MenuController">
-            <ul>
-                <li ng-repeat="item in menu.items" class="{{item.color}}" ng-class="{selected: isActive(item)}">
-                    <span ng-hide="isValid(item)">{{item.text}}</span>
-                    <a href="{{item.url}}" ng-show="isValid(item)">{{item.text}}</a>
-                </li>
-            </ul>
-        </nav>
+        <main-menu items="menuProvider"></main-menu>
     </header>
 
     <div class="content">