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

<template>
  <header class="header fixed">
    <div class="menu">
      <img src="@/assets/mobile/index/icon-menu.png" @click="toggleMenu" v-if="!menuShow" alt="menu"/>
      <img src="@/assets/mobile/index/icon-close.png" @click="toggleMenu" v-if="menuShow" alt="menu"/>
      <div class="drop-menu" v-show="menuShow">
        <a class="one-menu" href="/" :class="{'active': currentSection === 'home'}">Home</a>
        <a class="one-menu" href="/gameplay" :class="{'active': currentSection === 'gameplay'}">GamePlay</a>
        <a class="one-menu" href="/nft" :class="{'active': currentSection === 'nft'}">NFT</a>
        <a class="one-menu" href="/tokennomic" :class="{'active': currentSection === 'tokennomic'}">Tokennomic</a>
        <a class="one-menu" href="/team" :class="{'active': currentSection === 'team'}">Team</a>
        <a class="one-menu" href="/roadmap" :class="{'active': currentSection === 'roadmap'}">Roadmap</a>
        <div class="market-btn" @click="comingSoon">
          <img src="@/assets/mobile/index/btn-market.png" alt="marketplace"/>
        </div>
      </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 { Message } from 'element-ui'
import { BlockChain } from '@/utils/blockchain'
import { AppModule } from '@/store/modules/app'
import { UserModule } from '@/store/modules/user'

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

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

  comingSoon() {
    Message({
      message: 'coming soon',
      type: 'info',
      duration: 5 * 1000
    })
  }

  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.bc.disconnect()
  }

  async collectToWallet() {
    try {
      await this.bc.connect()
    } catch (err) {
      Message({
        message: err.message,
        type: 'error',
        duration: 5 * 1000
      })
      return
    }
    console.log(`AppModule.accountId: ${AppModule.accountId}, chainId: ${AppModule.chainId}`)
    try {
      await UserModule.Login({
        bcInstance: this.bc,
        account: AppModule.accountId,
        chainId: AppModule.chainId
      })
    } catch (err) {
      console.log(err)
    }
  }

  get logined() {
    return !!UserModule.token
  }

  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;
    .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>