✨ (header) back button if app installed

src/App.vue

@@ -20,6 +20,17 @@
             </div>
           </online-view>
         </router-link>
+        <app-installed class="navbar-item">
+          <template v-slot:app-installed>
+            <a href="#" @click="back">
+              <img
+                class="back-icon"
+                src="./assets/icons/baseline_arrow_back_white_48dp.png"
+                alt="back"
+              />
+            </a>
+          </template>
+        </app-installed>
         <span class="vaquant-title" :class="{ visible: shadow }">{{
           title
         }}</span>
@@ -73,13 +84,15 @@ import { Action, Getter } from 'vuex-class'
 import IUser from '@/models/IUser'
 import { COFFEE_LINK } from '@/utils/constants'
 import OnlineView from '@/components/OnlineView.vue'
+import AppInstalled from '@/components/AppInstalled.vue'
 
 @Component({
   directives: {
     ClickOutside
   },
   components: {
-    'online-view': OnlineView
+    'online-view': OnlineView,
+    'app-installed': AppInstalled
   }
 })
 export default class App extends Vue {
@@ -114,6 +127,10 @@ export default class App extends Vue {
   public hideMenu(): void {
     this.menuOpen = false
   }
+
+  public back(): void {
+    window.history.back()
+  }
 }
 </script>
 

src/components/AppInstalled.vue

@@ -0,0 +1,21 @@
+<template>
+  <span>
+    <slot v-if="isInstalled" name="app-installed"></slot>
+    <slot v-else name="app-not-installed"></slot>
+  </span>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
+
+@Component
+export default class AppInstalled extends Vue {
+  private isInstalled: boolean = false
+
+  private mounted() {
+    this.isInstalled =
+      window.matchMedia &&
+      window.matchMedia('(display-mode: standalone)').matches
+  }
+}
+</script>

src/styles/index.scss

@@ -81,6 +81,10 @@ img {
   width: 50px;
 }
 
+.back-icon {
+  vertical-align: middle;
+}
+
 .breadcrumb {
   font-size: 16pt;
   text-align: center;

src/views/accounts/AccountItem.vue

@@ -476,7 +476,6 @@ export default class AccountItem extends BaseAccount {
     color: var(--primary-font-color);
   }
   .account-title {
-    margin: 10px 0;
     span,
     a {
       padding: 0 10px;