Added more sub pages

src/app/about/components/index.vue

@@ -0,0 +1,21 @@
+<template>
+  <section>
+    <h1>{{ $t('about.headline') }}</h1>
+    <p>{{ $t('about.content')  }}</p>
+  </section>
+</template>
+
+<script>
+  export default {
+    name: 'About'
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import "~styles/layout";
+
+  h1,
+  p {
+    margin-bottom: $base-gap;
+  }
+</style>

src/app/about/i18n.js

@@ -0,0 +1,14 @@
+export default {
+  de: {
+    about: {
+      headline: 'Über uns',
+      content: 'Einführung und Aufbau müssen noch definiert werden.'
+    }
+  },
+  en: {
+    about: {
+      headline: 'About us',
+      content: 'Content to be written.'
+    }
+  }
+}

src/app/about/index.js

@@ -0,0 +1,2 @@
+export { default as routes } from './routes'
+export { default as i18n } from './i18n'

src/app/about/routes.js

@@ -0,0 +1,9 @@
+import About from './components/index'
+
+export default [
+  {
+    path: '/über-uns',
+    name: 'about',
+    component: About
+  }
+]

src/app/app.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="app">
-    <app-menu :menu="menu" :languages="languages" />
+    <app-menu :main="topMenu" :sub="subMenu" :languages="languages" />
     <main>
       <router-view></router-view>
     </main>
@@ -29,19 +29,27 @@
     i18n: {
       messages: {
         de: {
-          menu: {
+          topMenu: {
             index: 'Startseite',
+            about: 'Über uns',
             faq: 'FAQ',
-            press: 'Presse',
-            imprint: 'Impressum'
+            press: 'Presse'
+          },
+          subMenu: {
+            imprint: 'Impressum',
+            privacy: 'Datenschutz'
           }
         },
         en: {
-          menu: {
+          topMenu: {
             index: 'Main page',
+            about: 'About us',
             faq: 'FAQ',
-            press: 'Press',
-            imprint: 'Imprint'
+            press: 'Press'
+          },
+          subMenu: {
+            imprint: 'Imprint',
+            privacy: 'Data privacy'
           }
         }
       }
@@ -57,12 +65,18 @@
     },
 
     computed: {
-      menu () {
+      topMenu () {
         return [
-          { label: this.$t('menu.index'), route: { path: '/' } },
-          { label: this.$t('menu.faq'), route: { path: '/faq' } },
-          { label: this.$t('menu.press'), route: { path: '/presse' } },
-          { label: this.$t('menu.imprint'), route: { path: '/impressum' } }
+          { label: this.$t('topMenu.index'), route: { path: '/' } },
+          { label: this.$t('topMenu.about'), route: { path: '/über-uns' } },
+          { label: this.$t('topMenu.faq'), route: { path: '/faq' } },
+          { label: this.$t('topMenu.press'), route: { path: '/presse' } }
+        ]
+      },
+      subMenu () {
+        return [
+          { label: this.$t('subMenu.imprint'), route: { path: '/impressum' } },
+          { label: this.$t('subMenu.privacy'), route: { path: '/datenschutz' } }
         ]
       }
     }

src/app/privacy/components/index.vue

@@ -0,0 +1,21 @@
+<template>
+  <section>
+    <h1>{{ $t('privacy.headline') }}</h1>
+    <p>{{ $t('privacy.content')  }}</p>
+  </section>
+</template>
+
+<script>
+  export default {
+    name: 'Datenschutz'
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import "~styles/layout";
+
+  h1,
+  p {
+    margin-bottom: $base-gap;
+  }
+</style>

src/app/privacy/i18n.js

@@ -0,0 +1,14 @@
+export default {
+  de: {
+    privacy: {
+      headline: 'Datenschutz',
+      content: 'Einführung und Aufbau müssen noch definiert werden.'
+    }
+  },
+  en: {
+    privacy: {
+      headline: 'Data privacy',
+      content: 'Content to be written.'
+    }
+  }
+}

src/app/privacy/index.js

@@ -0,0 +1,2 @@
+export { default as routes } from './routes'
+export { default as i18n } from './i18n'

src/app/privacy/routes.js

@@ -0,0 +1,9 @@
+import Privacy from './components/index'
+
+export default [
+  {
+    path: '/datenschutz',
+    name: 'datenschutz',
+    component: Privacy
+  }
+]

src/components/menu.vue

@@ -1,7 +1,7 @@
 <template>
   <aside class="menu">
-    <ul>
-      <li v-for="(item, index) in menu" v-if="notLastItem(index)">
+    <ul class="top-menu">
+      <li v-for="item of main">
         <router-link tag="a" :to="item.route">
           {{ item.label }}
         </router-link>
@@ -18,31 +18,31 @@
       </button>
     </div>
 
-    <router-link class="menu-impressum" :to="impressum.route">
-      {{ impressum.label }}
-    </router-link>
+    <ul class="sub-menu">
+      <li v-for="item of sub">
+        <router-link tag="a" class="btn btn-small btn-txt" :to="item.route">
+          {{ item.label }}
+        </router-link>
+      </li>
+    </ul>
   </aside>
 </template>
 
 <script>
+  const getDefaultMenu = () => (
+    { label: 'Index', route: { path: '/' } }
+  )
+
   export default {
     name: 'Menu',
 
     props: {
-      menu: { type: Array, default: () => [] },
+      main: { type: Array, default: () => [getDefaultMenu()] },
+      sub: { type: Array, default: () => [getDefaultMenu()] },
       languages: { type: Array, default: () => [] }
     },
 
-    computed: {
-      impressum () {
-        return this.menu[this.menu.length - 1]
-      }
-    },
-
     methods: {
-      notLastItem (index) {
-        return index !== this.menu.length - 1
-      },
       changeLanguage (locale) {
         this.$i18n.locale = locale
         localStorage.setItem('euromat-locale', locale)
@@ -62,13 +62,16 @@
 
     ul {
       list-style: none;
-      text-align: right;
-      background: $background-secondary;
-      border-radius: $border-radius;
-      padding: 4px;
-      width: 100%;
-      box-shadow: 0 0 22px $dark-blue;
     }
+  }
+
+  .top-menu {
+    text-align: right;
+    background: $background-secondary;
+    border-radius: $border-radius;
+    padding: 4px;
+    width: 100%;
+    box-shadow: 0 0 22px $dark-blue;
 
     li:not(:last-child) {
       margin-bottom: 3px;
@@ -85,14 +88,19 @@
     display: block;
   }
 
-  .menu-impressum {
+  .sub-menu {
+    margin-top: $base-gap / 2;
     color: $text-color-base;
     font-weight: 500;
     font-size: 85%;
     text-align: center;
 
-    &:hover {
-      color: $text-color-special;
+    li:not(:last-child) {
+      margin-bottom: $small-gap;
+    }
+
+    a:hover {
+      color: $text-color-special !important;
     }
   }
 

src/i18n/index.js

@@ -3,10 +3,12 @@ import VueI18n from 'vue-i18n'
 
 import { i18n as intro } from '@/app/intro'
 import { i18n as euromat } from '@/app/euromat'
+import { i18n as about } from '@/app/about'
 import { i18n as fourzerofour } from '@/app/404'
 import { i18n as faq } from '@/app/faq'
 import { i18n as press } from '@/app/press'
 import { i18n as imprint } from '@/app/imprint'
+import { i18n as privacy } from '@/app/privacy'
 
 Vue.use(VueI18n)
 
@@ -17,18 +19,22 @@ export default new VueI18n({
     de: {
       ...intro.de,
       ...euromat.de,
+      ...about.de,
       ...fourzerofour.de,
       ...faq.de,
       ...press.de,
-      ...imprint.de
+      ...imprint.de,
+      ...privacy.de
     },
     en: {
       ...intro.en,
       ...euromat.en,
+      ...about.en,
       ...fourzerofour.en,
       ...faq.en,
       ...press.en,
-      ...imprint.en
+      ...imprint.en,
+      ...privacy.en
     }
   }
 })

src/router/index.js

@@ -3,9 +3,11 @@ import Router from 'vue-router'
 
 import { routes as intro } from '@/app/intro'
 import { routes as euromat } from '@/app/euromat'
+import { routes as about } from '@/app/about'
 import { routes as faq } from '@/app/faq'
 import { routes as press } from '@/app/press'
 import { routes as imprint } from '@/app/imprint'
+import { routes as privacy } from '@/app/privacy'
 import { routes as fourzerofour } from '@/app/404'
 
 Vue.use(Router)
@@ -15,9 +17,11 @@ export default new Router({
   routes: [
     ...intro,
     ...euromat,
+    ...about,
     ...faq,
     ...press,
     ...imprint,
+    ...privacy,
     ...fourzerofour
   ]
 })