From ab9acfd32bba024934cf14f33fee14a9ee278a71 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Mon, 19 Dec 2022 15:13:15 +0100
Subject: [PATCH] add LIB v-switch-case, add components/Breadcrumb

---
 frontend/package.json                         |  1 +
 .../src/components/Breadcrumb/breadcrumb.vue  | 25 +++++++
 frontend/src/components/Menu/Sidebar.vue      |  2 +-
 frontend/src/layouts/DashboardLayout.vue      | 10 +++
 frontend/src/plugins/dashboard-plugin.js      |  3 +
 frontend/src/routes/routes.js                 |  1 +
 frontend/yarn.lock                            | 69 ++++++++++++++++++-
 7 files changed, 109 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/components/Breadcrumb/breadcrumb.vue

diff --git a/frontend/package.json b/frontend/package.json
index 9c9f47e53..f01544187 100755
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -49,6 +49,7 @@
     "prettier": "^2.2.1",
     "qrcanvas-vue": "2.1.1",
     "regenerator-runtime": "^0.13.7",
+    "v-switch-case": "^1.0.3",
     "vee-validate": "^3.4.5",
     "vue": "2.6.12",
     "vue-apollo": "^3.0.7",
diff --git a/frontend/src/components/Breadcrumb/breadcrumb.vue b/frontend/src/components/Breadcrumb/breadcrumb.vue
new file mode 100644
index 000000000..b202ec404
--- /dev/null
+++ b/frontend/src/components/Breadcrumb/breadcrumb.vue
@@ -0,0 +1,25 @@
+<template>
+  <div class="breadcrumb bg-transparent">
+    <div v-switch="path">
+      <h2 v-case="'/overview'">overview</h2>
+      <h2 v-case="'/send'">send</h2>
+      <h2 v-case="'/transactions'">transactions</h2>
+      <h2 v-case="'/gdt'">gdt</h2>
+      <h2 v-case="'/community'">community</h2>
+      <h2 v-case="'/information'">information</h2>
+      <h2 v-case="'/settings'">settings</h2>
+      <h2 v-default>Default</h2>
+    </div>
+    {{ this.$route.bread }}
+  </div>
+</template>
+<script>
+export default {
+  name: 'Breadcrumb',
+  computed: {
+    path() {
+      return this.$route.path
+    },
+  },
+}
+</script>
diff --git a/frontend/src/components/Menu/Sidebar.vue b/frontend/src/components/Menu/Sidebar.vue
index 95fea3b28..4c7a9a56a 100644
--- a/frontend/src/components/Menu/Sidebar.vue
+++ b/frontend/src/components/Menu/Sidebar.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="component-sidebar">
-    <div id="side-menu" ref="sideMenu" class="gradido-border-radius appBoxShadow pt-2 mt-4">
+    <div id="side-menu" ref="sideMenu" class="gradido-border-radius appBoxShadow pt-2">
       <!-- @mouseout="$emit('toogleMobilMenu')" -->
       <div class="mb-6 mt-3">
         <b-nav vertical class="w-200">
diff --git a/frontend/src/layouts/DashboardLayout.vue b/frontend/src/layouts/DashboardLayout.vue
index e7c0432fe..76d8244b0 100755
--- a/frontend/src/layouts/DashboardLayout.vue
+++ b/frontend/src/layouts/DashboardLayout.vue
@@ -20,6 +20,14 @@
           @toogleMobilMenu="toogleMobilMenu"
         />
       </div> -->
+
+      <!-- Breadcrumb -->
+      <b-row>
+        <b-col cols="12" offset-lg="2">
+          <breadcrumb />
+        </b-col>
+      </b-row>
+
       <b-row fluid class="d-flex">
         <!-- Sidebar left -->
         <b-col cols="2" class="d-none d-lg-block">
@@ -90,6 +98,7 @@
 </template>
 <script>
 import ContentHeader from '@/layouts/templates/ContentHeader.vue'
+import Breadcrumb from '@/components/Breadcrumb/breadcrumb.vue'
 import RightSide from '@/layouts/templates/RightSide.vue'
 import SkeletonOverview from '@/components/skeleton/Overview.vue'
 import Navbar from '@/components/Menu/Navbar.vue'
@@ -114,6 +123,7 @@ export default {
     SessionLogoutTimeout,
     ContentFooter,
     FadeTransition,
+    Breadcrumb,
   },
   data() {
     return {
diff --git a/frontend/src/plugins/dashboard-plugin.js b/frontend/src/plugins/dashboard-plugin.js
index fe617169f..7ec85f33f 100755
--- a/frontend/src/plugins/dashboard-plugin.js
+++ b/frontend/src/plugins/dashboard-plugin.js
@@ -20,6 +20,8 @@ import VueApollo from 'vue-apollo'
 
 import VueTimers from 'vue-timers'
 
+import VSwitch from 'v-switch-case'
+
 export default {
   install(Vue) {
     Vue.use(GlobalComponents)
@@ -32,5 +34,6 @@ export default {
     Vue.use(Loading)
     Vue.use(VueApollo)
     Vue.use(VueTimers)
+    Vue.use(VSwitch)
   },
 }
diff --git a/frontend/src/routes/routes.js b/frontend/src/routes/routes.js
index 51c5d95d8..8c66c36ed 100755
--- a/frontend/src/routes/routes.js
+++ b/frontend/src/routes/routes.js
@@ -16,6 +16,7 @@ const routes = [
     meta: {
       requiresAuth: true,
     },
+    bread: 'overview xxx'
   },
   {
     path: '/send',
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 23b36ccc0..946a78a3e 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -744,6 +744,11 @@
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.16.12.tgz#9474794f9a650cf5e2f892444227f98e28cdf8b6"
   integrity sha512-VfaV15po8RiZssrkPweyvbGVSe4x2y+aciFCgn0n0/SJMR22cwofRV1mtnJQYcSB1wUTaA/X1LnA3es66MCO5A==
 
+"@babel/parser@^7.18.4":
+  version "7.20.5"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.20.5.tgz#7f3c7335fe417665d929f34ae5dceae4c04015e8"
+  integrity sha512-r27t/cy/m9uKLXQNWWebeCUHgnAZq0CpG1OwKRxzJMP1vpSU4bSIK2hq+/cp0bQxetkXx38n09rNu8jVkcK/zA==
+
 "@babel/parser@^7.7.0":
   version "7.13.4"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.13.4.tgz#340211b0da94a351a6f10e63671fa727333d13ab"
@@ -2962,6 +2967,15 @@
     semver "^6.1.0"
     strip-ansi "^6.0.0"
 
+"@vue/compiler-sfc@2.7.14":
+  version "2.7.14"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-2.7.14.tgz#3446fd2fbb670d709277fc3ffa88efc5e10284fd"
+  integrity sha512-aNmNHyLPsw+sVvlQFQ2/8sjNuLtK54TC6cuKnVzAY93ks4ZBrvwQSnkkIh7bsbNhum5hJBS00wSDipQ937f5DA==
+  dependencies:
+    "@babel/parser" "^7.18.4"
+    postcss "^8.4.14"
+    source-map "^0.6.1"
+
 "@vue/component-compiler-utils@^3.0.0", "@vue/component-compiler-utils@^3.1.0":
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/@vue/component-compiler-utils/-/component-compiler-utils-3.2.0.tgz#8f85182ceed28e9b3c75313de669f83166d11e5d"
@@ -2992,6 +3006,15 @@
   resolved "https://registry.yarnpkg.com/@vue/preload-webpack-plugin/-/preload-webpack-plugin-1.1.2.tgz#ceb924b4ecb3b9c43871c7a429a02f8423e621ab"
   integrity sha512-LIZMuJk38pk9U9Ur4YzHjlIyMuxPlACdBIHH9/nGYVTsaGKOSnSuELiE8vS9wa+dJpIYspYUOqk+L1Q4pgHQHQ==
 
+"@vue/test-utils@^1.0.0-beta.16":
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/@vue/test-utils/-/test-utils-1.3.3.tgz#4fbd38587b0ec091dfaa355ac38ce3d888273285"
+  integrity sha512-DmZkKrH5/MSkrU0hhHhv5+aOXcEJSaOhutKMOh2viuiLiMaFeOLPiTEvtegLunO3rXBagzHO681qW1sNMaB1sQ==
+  dependencies:
+    dom-event-types "^1.0.0"
+    lodash "^4.17.15"
+    pretty "^2.0.0"
+
 "@vue/test-utils@^1.1.3":
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/@vue/test-utils/-/test-utils-1.1.3.tgz#747f5683d8d4633c85a385fe2e02c1bb35bec153"
@@ -5477,6 +5500,11 @@ cssstyle@^2.0.0, cssstyle@^2.3.0:
   dependencies:
     cssom "~0.3.6"
 
+csstype@^3.1.0:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.1.tgz#841b532c45c758ee546a11d5bd7b7b473c8c30b9"
+  integrity sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==
+
 current-script-polyfill@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/current-script-polyfill/-/current-script-polyfill-1.0.0.tgz#f31cf7e4f3e218b0726e738ca92a02d3488ef615"
@@ -7612,7 +7640,7 @@ hash.js@^1.0.0, hash.js@^1.0.3:
     inherits "^2.0.3"
     minimalistic-assert "^1.0.1"
 
-he@1.2.x, he@^1.1.0:
+he@1.2.x, he@^1.1.0, he@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
   integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
@@ -10341,6 +10369,11 @@ nanoid@^3.3.1:
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.1.tgz#6347a18cac88af88f58af0b3594b723d5e99bb35"
   integrity sha512-n6Vs/3KGyxPQd6uO0eH4Bv0ojGSUvuLlIHtC3Y0kEO23YRge8H9x1GCzLn28YX0H66pMkxuaeESFq4tKISKwdw==
 
+nanoid@^3.3.4:
+  version "3.3.4"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.4.tgz#730b67e3cd09e2deacf03c027c81c9d9dbc5e8ab"
+  integrity sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==
+
 nanomatch@^1.2.9:
   version "1.2.13"
   resolved "https://registry.yarnpkg.com/nanomatch/-/nanomatch-1.2.13.tgz#b87a8aa4fc0de8fe6be88895b38983ff265bd119"
@@ -11624,6 +11657,15 @@ postcss@^8.4.0, postcss@^8.4.6, postcss@^8.4.8:
     picocolors "^1.0.0"
     source-map-js "^1.0.2"
 
+postcss@^8.4.14:
+  version "8.4.20"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.20.tgz#64c52f509644cecad8567e949f4081d98349dc56"
+  integrity sha512-6Q04AXR1212bXr5fh03u8aAwbLxAQNGQ/Q1LNa0VfOI06ZAlhPHtQvE4OIdpj4kLThXilalPnmDSOD65DcHt+g==
+  dependencies:
+    nanoid "^3.3.4"
+    picocolors "^1.0.0"
+    source-map-js "^1.0.2"
+
 prelude-ls@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
@@ -14073,6 +14115,15 @@ uuid@^8.3.0:
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.2.tgz#80d5b5ced271bb9af6c445f21a1a04c606cefbe2"
   integrity sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==
 
+v-switch-case@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/v-switch-case/-/v-switch-case-1.0.3.tgz#5e69ad22aa6c2f1e8d48723b9585ae96c34b969e"
+  integrity sha512-58ec5JytRk7scZAZtpRs0RTJV4iu4DevhCmryha1SPswTtBymmkp/0T2r7U63OgKYEQ1zdhocKbGOKHXOFlKfg==
+  dependencies:
+    "@vue/test-utils" "^1.0.0-beta.16"
+    vue "^2.5.16"
+    vue-template-compiler "^2.5.16"
+
 v8-compile-cache@^2.0.3, v8-compile-cache@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz#2de19618c66dc247dcfb6f99338035d8245a2cee"
@@ -14303,6 +14354,14 @@ vue-style-loader@^4.1.0:
     hash-sum "^1.0.2"
     loader-utils "^1.0.2"
 
+vue-template-compiler@^2.5.16:
+  version "2.7.14"
+  resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.7.14.tgz#4545b7dfb88090744c1577ae5ac3f964e61634b1"
+  integrity sha512-zyA5Y3ArvVG0NacJDkkzJuPQDF8RFeRlzV2vLeSnhSpieO6LK2OVbdLPi5MPPs09Ii+gMO8nY4S3iKQxBxDmWQ==
+  dependencies:
+    de-indent "^1.0.2"
+    he "^1.2.0"
+
 vue-template-compiler@^2.6.11:
   version "2.6.12"
   resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.6.12.tgz#947ed7196744c8a5285ebe1233fe960437fcc57e"
@@ -14331,6 +14390,14 @@ vue@2.6.12, vue@^2.6.11:
   resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.12.tgz#f5ebd4fa6bd2869403e29a896aed4904456c9123"
   integrity sha512-uhmLFETqPPNyuLLbsKz6ioJ4q7AZHzD8ZVFNATNyICSZouqP2Sz0rotWQC8UNBF6VGSCs5abnKJoStA6JbCbfg==
 
+vue@^2.5.16:
+  version "2.7.14"
+  resolved "https://registry.yarnpkg.com/vue/-/vue-2.7.14.tgz#3743dcd248fd3a34d421ae456b864a0246bafb17"
+  integrity sha512-b2qkFyOM0kwqWFuQmgd4o+uHGU7T+2z3T+WQp8UBjADfEv2n4FEMffzBmCKNP0IGzOEEfYjvtcC62xaSKeQDrQ==
+  dependencies:
+    "@vue/compiler-sfc" "2.7.14"
+    csstype "^3.1.0"
+
 vuex-persistedstate@^4.0.0-beta.3:
   version "4.0.0-beta.3"
   resolved "https://registry.yarnpkg.com/vuex-persistedstate/-/vuex-persistedstate-4.0.0-beta.3.tgz#89dd712de72d28e85cc95467d066002c1405f277"