Merge pull request #30 from Hilfstelefon-WirVsVirus/click_dummy_new

Click dummy new

package.json

@@ -14,6 +14,7 @@
     "core-js": "^3.6.4",
     "register-service-worker": "^1.6.2",
     "vue": "^2.6.11",
+    "vue-fragment": "^1.5.1",
     "vue-i18n": "^8.0.0",
     "vue-router": "^3.1.5",
     "vuex": "^3.1.2",

src/assets/styles/index.scss

@@ -24,14 +24,15 @@ h1, h2 ,h3 ,h4 ,h5 ,h6 {
 .page-container {
   margin: auto;
   max-width: 1200px;
-
   &.home main {
     margin: 0 auto;
-
     @media #{$desktop} {
       max-width: 800px;
+      min-height: 100vh;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
     }
-
     @media #{$tablet} {
       max-width: 600px;
     }

src/components/Card.vue

@@ -17,6 +17,7 @@ export default {
     padding: 30px 20px;
     margin: 0 5px;
     text-align: center;
+    height: 400px;
     @include shadow(30);
   }
 </style>

src/components/DashboardNavigation.vue

@@ -0,0 +1,77 @@
+<template>
+  <div class="dashboard-navigation">
+    <div class="dashboard-navigation__logo logo">
+      <img
+        class="logo__image"
+        src="/img/icons/logo.svg"
+        :alt="$t('meta.title')"
+      />
+      <h1 class="logo__text">{{ $t('meta.title') }}</h1>
+    </div>
+    <ul class="dashboard-navigation__list">
+      <li class="dashboard-navigation__list-item">
+        <router-link to="/dashboard">Offene Tasks</router-link>
+      </li>
+      <li class="dashboard-navigation__list-item">
+        <router-link to="/dashboard/mytasks">Meine Tasks</router-link>
+      </li>
+      <li class="dashboard-navigation__list-item">{{ email }}</li>
+    </ul>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex';
+
+export default {
+  name: 'DashboardNavigation',
+  computed: {
+    ...mapGetters([
+      'email',
+    ]),
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+  .dashboard-navigation {
+    display: flex;
+    margin-top: 20px;
+
+    &__logo {
+      flex: 1 1 60%;
+    }
+
+    &__list {
+      flex: 1 1 40%;
+      display: flex;
+      list-style: none;
+      margin: 0;
+      padding: 0;
+      align-items: center;
+    }
+
+    &__list-item {
+      flex: 1 1 100%;
+      text-align: right;
+    }
+  }
+
+  .logo {
+    display: flex;
+    justify-content: center;
+
+    @media #{$tablet}, #{$desktop} {
+      justify-content: flex-start;
+    }
+
+    &__image {
+      width: 30px;
+      margin-right: 10px;
+    }
+
+    &__text {
+      margin: 0;
+    }
+  }
+</style>