From c7bc57d38d3ebe4d51efe01a0f489ffe2ff432ac Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Mon, 20 Aug 2018 14:45:47 +0200
Subject: [PATCH] Add top navigation

---
 client/src/App.vue                      | 43 ++++++++++++++-----------
 client/src/components/TopNavigation.vue | 27 ++++++++++++++++
 2 files changed, 51 insertions(+), 19 deletions(-)
 create mode 100644 client/src/components/TopNavigation.vue

diff --git a/client/src/App.vue b/client/src/App.vue
index cadc9bcd..bfc492f7 100644
--- a/client/src/App.vue
+++ b/client/src/App.vue
@@ -1,7 +1,9 @@
 <template>
   <div class="container skillbox">
     <header class="header skillbox__header">
-      <router-link to="/" class="header__logo">skillBOX</router-link>
+      <top-navigation></top-navigation>
+      <router-link to="/" class="skillbox__header-logo">skillBOX</router-link>
+      <div>Hans Muster</div>
     </header>
     <router-view></router-view>
     <footer skillbox__footer>Footer</footer>
@@ -9,9 +11,15 @@
 </template>
 
 <script>
+  import TopNavigation from "@/components/TopNavigation.vue";
+
   export default {
     name: 'App',
 
+    components: {
+      TopNavigation
+    },
+
     data() {
       return {}
     },
@@ -25,13 +33,6 @@
   @import "styles/main.scss";
 
   .skillbox {
-    &__header {
-      display: grid;
-    }
-  }
-
-  //todo: move
-  .container {
     margin: 0 auto;
     width: 100%;
     //max-width: 1440px;
@@ -41,21 +42,25 @@
     min-height: 100vh;
     grid-template-areas: "h" "c" "f";
 
-    .header {
+    &__header {
       grid-area: h;
       box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.12);
-      display: flex;
+      display: grid;
       align-items: center;
-      justify-content: center;
-
-      &__logo {
-        color: #17A887;
-        font-size: 36px;
-        font-weight: 800;
-        font-family: $sans-serif-font-family;
-      }
+      justify-content: space-around;
+      grid-template-columns: auto 1fr auto;
     }
-    footer {
+
+    &__header-logo {
+      color: #17A887;
+      font-size: 36px;
+      font-weight: 800;
+      font-family: $sans-serif-font-family;
+      display: flex;
+      justify-self: center;
+    }
+
+    &__footer {
       grid-area: f;
       display: none;
     }
diff --git a/client/src/components/TopNavigation.vue b/client/src/components/TopNavigation.vue
new file mode 100644
index 00000000..dcd52b08
--- /dev/null
+++ b/client/src/components/TopNavigation.vue
@@ -0,0 +1,27 @@
+<template>
+  <div class="top-navigation">
+    <router-link to="/" class="top-navigation__link top-navigation__link--active">Inhalte</router-link>
+    <router-link to="/" class="top-navigation__link">Räume</router-link>
+    <router-link to="/" class="top-navigation__link">Portfolio</router-link>
+  </div>
+</template>
+
+<style scoped lang="scss">
+  @import "@/styles/_variables.scss";
+
+  .top-navigation {
+    display: flex;
+
+    &__link {
+      font-size: 1.0625rem;
+      padding: 0 24px;
+      font-family: $sans-serif-font-family;
+      font-weight: 400;
+      color: $color-grey;
+
+      &--active {
+        color: $color-brand;
+      }
+    }
+  }
+</style>