master: change repo

src/App.vue

@@ -0,0 +1,158 @@
+<template>
+  <div id="app" class="app">
+    <nav
+      class="nav navbar is-fixed-top is-primary"
+      role="navigation"
+      aria-label="main navigation"
+      :class="{ shadow }"
+      v-click-outside="hideMenu"
+    >
+      <div class="navbar-brand">
+        <router-link class="navbar-item" to="/">
+          <img src="./assets/vaquant-root-white.png" title="vaquant" />
+          <online-view class="online-view">
+            <div slot="offline">
+              <img
+                class="icon"
+                src="./assets/icons/baseline_cloud_off_white_48dp.png"
+                alt="offline"
+              />
+            </div>
+          </online-view>
+        </router-link>
+        <span class="vaquant-title" :class="{ 'visible': shadow }">{{ title }}</span>
+        <div
+          class="navbar-burger burger"
+          data-target="navbar-main"
+          @click="toggleMenu"
+          :class="{ 'is-active': menuOpen }"
+        >
+          <span></span>
+          <span></span>
+          <span></span>
+        </div>
+      </div>
+
+      <div
+        id="navbar-main"
+        class="navbar-menu"
+        :class="{ 'is-active': menuOpen }"
+        @click="hideMenu"
+      >
+        <div class="navbar-end">
+          <router-link class="navbar-item" :to="{ name: 'about' }" v-t="'title.about'"></router-link>
+          <router-link class="navbar-item" :to="{ name: 'pricing' }" v-t="'title.pricing'"></router-link>
+          <a
+            class="navbar-item"
+            target="_blank"
+            rel="noreferrer"
+            :href="coffee"
+          >Supportez Vaquant avec un ☕ !</a>
+          <router-link
+            class="navbar-item"
+            :to="{ name: 'user' }"
+          >{{ username ? username : $t('user.loginsignup') }}</router-link>
+        </div>
+      </div>
+    </nav>
+    <main id="main">
+      <transition name="fade" mode="out-in">
+        <router-view />
+      </transition>
+    </main>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
+import { throttle } from 'lodash-es'
+import ClickOutside from 'vue-click-outside'
+import { Action, Getter } from 'vuex-class'
+import IUser from '@/models/IUser'
+import { COFFEE_LINK } from '@/utils/constants'
+import OnlineView from '@/components/OnlineView.vue'
+
+@Component({
+  directives: {
+    ClickOutside
+  },
+  components: {
+    'online-view': OnlineView
+  }
+})
+export default class App extends Vue {
+  @Getter
+  public user!: IUser | null
+  @Getter
+  public username!: string
+  @Getter
+  public title!: string | null
+  public menuOpen: boolean = false
+  public transitionName: string = ''
+  public shadow: boolean = false
+  public coffee: string = COFFEE_LINK
+
+  public mounted(): void {
+    const main = document.getElementById('main')
+    if (main) {
+      this.shadow = main.getBoundingClientRect().top < 0
+      document.addEventListener(
+        'scroll',
+        throttle((evt) => {
+          this.shadow = main.getBoundingClientRect().top < 0
+        }, 150)
+      )
+    }
+  }
+
+  public toggleMenu(): void {
+    this.menuOpen = !this.menuOpen
+  }
+
+  public hideMenu(): void {
+    this.menuOpen = false
+  }
+}
+</script>
+
+<style lang="scss">
+.navbar {
+  color: red;
+  .vaquant-title {
+    opacity: 0;
+    line-height: 52px;
+    transition: opacity 0.25s ease-out;
+    &.visible {
+      opacity: 1;
+    }
+  }
+  .online-view {
+    position: absolute;
+    bottom: 7px;
+    right: 18px;
+    width: 18px;
+    height: auto;
+  }
+}
+.navbar::before {
+  content: '';
+  position: absolute;
+  right: 0;
+  bottom: -5px;
+  left: 0;
+  width: 100%;
+  height: 5px;
+  transition: opacity 0.25s ease-out;
+  pointer-events: none;
+  opacity: 0;
+  box-shadow: inset 0 5px 6px -3px rgba(0, 0, 0, 0.842);
+  will-change: opacity;
+}
+.navbar.shadow::before {
+  opacity: 1;
+}
+main {
+  margin-left: 0.75rem;
+  margin-right: 0.75rem;
+}
+</style>