TheMenu.vue

TheMenu.vue

<template>
  <div
    class="D(f) Ai(c) Pos(f) W(100%) H(100px) Trsp(a) Trsdu(300ms) Trstf(e) Z(9999)"
    :class="{
      'T(0)': pinned,
      'T(-100px)': !pinned,
      'Bgc(t)': showingTransparency && atTop,
      'Bgc(#141420) Bxsh(headerboxshadow)': !showingTransparency || !atTop
    }"
  >
    <div class="container Py(17px) D(f) Ai(c) Jc(sb) Ovx(a) Whs(nw)">
      <nuxt-link
        :to="{
          name: 'index'
        }"
        class="D(b) H(38px) Mt(2px) Mend(20px)"
      >
        <img src="//image.codecourse.com/client/logo.svg" class="H(38px)" alt="The Codecourse logo">
      </nuxt-link>

      <ul class="List(n) P(0) M(0) D(f) Ai(c)">
        <li>
          <nuxt-link
            :to="{
              name: 'subjects'
            }"
            class="Fz(15px) D(ib) Lh(18px) Fw(700) P(20px) C(#fff) C(#03a6ff):h Tt(u) Td(n) Trsp(a) Trsdu(200ms) Trstf(e)"
          >
            Subjects
          </nuxt-link>
        </li>
        <li>
          <nuxt-link
            :to="{
              name: 'library'
            }"
            class="Fz(15px) D(ib) Lh(18px) Fw(700) P(20px) C(#fff) C(#03a6ff):h Tt(u) Td(n) Trsp(a) Trsdu(200ms) Trstf(e)"
          >
            Library
          </nuxt-link>
        </li>
        <li v-if="!$auth.loggedIn || !$auth.user.subscription.active">
          <nuxt-link :to="{ name: 'pro' }" class="Fz(15px) D(ib) Lh(18px) Fw(700) P(20px) C(#fff) C(#03a6ff):h Tt(u) Td(n) Trsp(a) Trsdu(200ms) Trstf(e)">Go pro</nuxt-link>
        </li>

        <template v-if="$auth.loggedIn">
          <li>
            <nuxt-link
              :to="{ name: 'account' }"
              class="Fz(15px) D(ib) Lh(18px) Fw(700) P(20px) C(#fff) C(#03a6ff):h Tt(u) Td(n) Trsp(a) Trsdu(200ms) Trstf(e) Pend(0) Mend(20px)"
            >
              {{ $auth.user.first_name }}
            </nuxt-link>
          </li>
        </template>

        <li>
          <nuxt-link :to="{ name: 'library-search' }" class="D(ib) Lh(18px) Fw(700) P(20px) C(#03a6ff):h Tt(u) Td(n)">
            <svg class="Fill(#fff)" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
              <path d="M16.32 14.9l5.39 5.4a1 1 0 0 1-1.42 1.4l-5.38-5.38a8 8 0 1 1 1.41-1.41zM10 16a6 6 0 1 0 0-12 6 6 0 0 0 0 12z"/>
            </svg>
          </nuxt-link>
        </li>

        <template v-if="!$auth.loggedIn">
          <li>
            <nuxt-link
              :to="{
                name: 'auth-signin'
              }"
              class="Fz(15px) D(ib) Lh(18px) Fw(700) P(20px) C(#fff) C(#03a6ff):h Tt(u) Td(n) Trsp(a) Trsdu(200ms) Trstf(e)"
            >
              Sign in
            </nuxt-link>
          </li>
          <li>
            <nuxt-link
              :to="{ name: 'pro' }"
              class="parent Fz(15px) D(ib) Lh(18px) Fw(700) C(#fff)! Tt(u) Td(n) Trsp(a) Trsdu(200ms) Trstf(e) P(2px) Bdrs(100px) Mstart(20px) Bg(pinkgradient) Mend(20px) Mend(0)--md"
            >
              <span class="D(b) Bdrs(100px) Bgc(#141420) Py(14px) Px(28px) Trsp(a) Trsdu(200ms) Trstf(e) parent:h_Bgc(t) Trsp(a) Trsdu(200ms) Trstf(e)">Get started</span>
            </nuxt-link>
          </li>
        </template>
      </ul>
    </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        pinned: true,
        atTop: true,
        showingTransparency: this.transparent
      }
    },
    props: {
      transparent: {
        required: false,
        type: Boolean,
        default: false
      }
    },
    mounted () {
      let refOffset = 0
      const menuHeight = 100

      document.addEventListener('scroll', () => {
        const newOffset = window.scrollY || window.pageYOffset
        this.atTop = newOffset <= 0

        if (newOffset > menuHeight) {
          this.pinned = !(newOffset > refOffset)
          refOffset = newOffset
        } else {
          this.pinned = true
        }
      }, false)
    }
  }
</script>