bemarket/src/components/mobile/main/MobileHeader.vue

<template>
  <header class="header fixed">
    <div class="menu">
      <anim-menu :menu-show="menuShow" @menu-stat-change="toggleMenu" class="menu-icon"></anim-menu>
      <div class="drop-menu" :class="{show: menuShow}">
        <a class="one-menu" href="/" :class="{'active': currentSection === 'home'}">Home</a>
        <a class="one-menu" href="/gameplay/index.html" :class="{'active': currentSection === 'gameplay'}">GamePlay</a>
        <a class="one-menu" href="/nft/index.html" :class="{'active': currentSection === 'nft'}">NFT</a>
        <a class="one-menu" href="/tokenomic/index.html" :class="{'active': currentSection === 'tokenomic'}">Tokenomic</a>
        <a class="one-menu" href="/team/index.html" :class="{'active': currentSection === 'team'}">Team</a>
        <a class="one-menu" href="/roadmap/index.html" :class="{'active': currentSection === 'roadmap'}">Roadmap</a>
        <a class="market-btn" href="/market">
          <img src="@/assets/mobile/index/btn-market.png" alt="marketplace"/>
        </a>
      </div>
    </div>
    <div class="logo">
      <img src="@/assets/main/p1/icon_logo_t.png" alt="logo"/>
    </div>
    <div v-if="!logined" class="login-btn" @click="collectToWallet">
      <img src="@/assets/mobile/index/icon-login.png" alt="login"/>
    </div>
    <div v-if="logined" class="logout" @click="disconnectWallet">Logout</div>
  </header>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { AppModule } from '@/store/modules/app'
import { UserModule } from '@/store/modules/user'
import ChainManager from '@/chain/ChainManager'
import AnimMenu from '@/components/core/AnimMenu.vue'

@Component({
  name: 'MobileHeader',
  components: {
    AnimMenu
  },
  props: ['currentSection']
})
export default class MobileHeader extends Vue {
  private menuShow = false
  chainManager = new ChainManager()

  toggleMenu() {
    this.menuShow = !this.menuShow
  }

  changeSection(e: PointerEvent) {
    this.menuShow = false
    const target = e.currentTarget as HTMLElement
    if (target) {
      this.$emit('section-change', target.dataset.menuanchor)
    }
  }

  async disconnectWallet() {
    return this.chainManager.logout()
  }

  async created() {
    await this.chainManager.init()
  }

  async collectToWallet() {
    return this.chainManager.login()
  }

  get logined() {
    return !!UserModule.token && !!AppModule.step
  }

  get accountId() {
    return AppModule.accountId
  }
}
</script>
<style lang="scss" scoped>
.header{
  width: 100vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: black;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99;
  &.fixed{
    position: fixed;
  }
  .menu{
    margin-left: 10.9vw;
    position: relative;
    img{
      width: 7.5vw;
      height: 7.5vw;
    }
  }
  .logo{
    img{
      width: 10.4vw;
      height: 10.4vw;
    }
  }
  .login-btn{
    margin-right: 10.9vw ;
    img{
      width: 7.5vw;
      height: 7.5vw;
    }
  }
  .logout{
    margin-right: 10.9vw ;
    color: #8C8C8C;
    font-size: 3.8vw;
  }
  .drop-menu{
    width: 100vw;
    background-color: black;
    position: absolute;
    left: -10.9vw;
    right: 0;
    display: flex;
    align-items: center;
    flex-direction: column;
    padding-bottom: 10vw;
    transform: translateX(-100%);
    transition: transform linear 0.2s, opacity linear 0.2s;
    opacity: 0;
    &.show{
      transform: translateX(0%);
      opacity: 1;
    }
    .one-menu{
      line-height: 20vw;
      width: 86vw;
      color: #8C8C8C;
      font-size: 3.8vw;
      text-align: center;
      text-decoration: unset;
      &.active{
        color: white;
      }
      border-bottom: #8C8C8C 1px solid;
    }
    .market-btn {
      margin-top: 10vw;
      img{
        width: 52vw;
        height: 9.9vw;
      }
    }
  }
}
</style>
<style lang="scss">
.menu-toggle{
  margin-top: 0!important;
  .span{
    background-color: #FFE430!important;
  }
}
</style>