+ unstable Navigation component

src/client/app.js

@@ -1,3 +1,4 @@
+import Navigation from './components/Navigation';
 import MainMenu from './components/MainMenu';
 import Breadcrumbs from './components/Breadcrumbs';
 import Document from './components/Document';
@@ -79,6 +80,7 @@ app.run(($location, $rootScope, $http) => {
     Join,
     UppercaseFirst,
     MainMenu,
+    Navigation,
     Breadcrumbs,
     Timeline,
     TimelineRecord,

src/client/components/Navigation.js

@@ -0,0 +1,10 @@
+import template from '../../templates/components/navigation.html';
+
+export default function (app) {
+    app.component('navigation', {
+        bindings: {
+            menu: '<'
+        },
+        template: template
+    });
+};

src/style/components/navigation.scss

@@ -0,0 +1,38 @@
+@import "../variables";
+
+.navigation {
+  -webkit-overflow-scrolling: touch;
+
+  width: 100%;
+  z-index: 100;
+  overflow-x: scroll;
+  position: fixed;
+  top: 0;
+  white-space: nowrap;
+  background-color: $darker-color;
+
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.navigation__right {
+  color: $light-color;
+  margin-right: 3em;
+}
+
+@media (max-width: $mobile-width) {
+  .navigation {
+    overflow: hidden;
+
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+  }
+
+  .navigation__right {
+    //display: none;
+    margin-right: 0;
+  }
+}
+

src/style/style.scss

@@ -3,6 +3,7 @@
 @import "components/document";
 @import "components/teacher-proifile";
 @import "components/main-menu";
+@import "components/navigation";
 @import "components/breadcrumbs";
 @import "components/timeline";
 @import "components/timeline-record";

src/templates/components/navigation.html

@@ -0,0 +1,7 @@
+<div class="navigation">
+    <main-menu items="$ctrl.menu"></main-menu>
+
+    <div class="navigation__right">
+        <span>+7 (81362) 76-312</span>
+    </div>
+</div>

src/templates/main.html

@@ -47,6 +47,7 @@
 <div class="body-wrapper" ng-controller="AppController">
     <header>
         <main-menu items="menuProvider"></main-menu>
+        <!--<navigation menu="menuProvider"></navigation>-->
     </header>
 
     <div class="body-wrapper__content">