diff --git a/src/client/app.js b/src/client/app.js index 1d762e90..a41ff046 100644 --- a/src/client/app.js +++ b/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, diff --git a/src/client/components/Navigation.js b/src/client/components/Navigation.js new file mode 100644 index 00000000..4d222284 --- /dev/null +++ b/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 + }); +}; \ No newline at end of file diff --git a/src/style/components/navigation.scss b/src/style/components/navigation.scss new file mode 100644 index 00000000..2e83967d --- /dev/null +++ b/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; + } +} + diff --git a/src/style/style.scss b/src/style/style.scss index dbe68369..cd8f250b 100644 --- a/src/style/style.scss +++ b/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"; diff --git a/src/templates/components/navigation.html b/src/templates/components/navigation.html new file mode 100644 index 00000000..2496a232 --- /dev/null +++ b/src/templates/components/navigation.html @@ -0,0 +1,7 @@ + diff --git a/src/templates/main.html b/src/templates/main.html index c6743ec9..cb0f991d 100644 --- a/src/templates/main.html +++ b/src/templates/main.html @@ -47,6 +47,7 @@
+