vaquant/src/App.vue

<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">
          <install-app />
          <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">
$icon_size: 18px;
$margin: 0.75rem;

.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: $icon_size;
    width: $icon_size;
    height: auto;
  }
  &::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;
  }
  &.shadow::before {
    opacity: 1;
  }
}

main {
  margin-left: $margin;
  margin-right: $margin;
}
</style>