bemarket/src/components/market/MoileTop.vue

<template>
  <div>
    <div class="mobile-header" style="">
      <a href="/"
      ><img
        class="logo"
        src="@/assets/main/p1/icon_logo_t.png"
      /></a>
      <label class="mobile-menu-icon" @click="toggleMenu">
        <img src="data:image/svg+xml,%3csvg width='28' height='20' viewBox='0 0 28 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cpath d='M0 3.33333V0H28V3.33333L0 3.33333Z' fill='white' /%3e %3cpath d='M0 11.6667H28V8.33333H0V11.6667Z' fill='white' /%3e %3cpath d='M0 20H28V16.6667H0V20Z' fill='white' /%3e %3c/svg%3e"></label>
    </div>
    <div class="nav overflow" :class="{'show': menuShow}">
      <a class="navItem" href="/official">Official Shop</a>
      <a class="navItem dash" href="/market">Marketplace</a>
      <button v-if="!walletCollected" class="general-btn connectButton mobile" @click="collectToWallet">
        <span>Connect Wallet</span>
      </button>
      <label class="navItem contact">Contact us</label>
      <label class="navItem profile" v-if="walletCollected" @click="subShow=!subShow">
        <div>My Profile</div>
        <img src="data:image/svg+xml,%3csvg width='10' height='18' viewBox='0 0 10 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cpath d='M0.0507022 16.0711L1.46491 17.4854L9.9502 9.00007L1.46492 0.514787L0.0507015 1.929L7.12177 9.00007L0.0507022 16.0711Z' fill='%23BCADF2' /%3e %3c/svg%3e">
      </label>
      <label class="navItem" v-if="walletCollected" @click="disconnectWallet">Log Out</label>
      <div class="navChild" :class="{'show': subShow}">
        <label class="navItem profile" @click="subShow=!subShow">
          <img class="arrowIcon" src="data:image/svg+xml,%3csvg width='10' height='18' viewBox='0 0 10 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cpath d='M0.0507022 16.0711L1.46491 17.4854L9.9502 9.00007L1.46492 0.514787L0.0507015 1.929L7.12177 9.00007L0.0507022 16.0711Z' fill='%23BCADF2' /%3e %3c/svg%3e">
          <div class="lbl">My Profile</div>
        </label>
        <label class="navItem">Inventory</label>
        <label class="navItem">Account Setting</label>
        <label class="navItem">Wallet</label>
        <label class="navItem contact">Contact us</label>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { BlockChain } from '@/utils/blockchain'
import { AppModule } from '@/store/modules/app'

@Component({
  name: 'MobileTop',
  components: {

  }
})
export default class extends Vue {
  menuShow = false
  subShow = false
  bc = new BlockChain();

  get walletCollected() {
    return AppModule.walletConnected
  }

  toggleMenu() {
    this.menuShow = !this.menuShow
    if (!this.menuShow) {
      this.subShow = false
    }
  }

  async collectToWallet() {
    return this.bc.connect()
  }

  async disconnectWallet() {
    return this.bc.disconnect()
  }
}
</script>

<style lang="scss" scoped>
@media (max-width: 767px) {
  .mobile-header {
    display: flex;
    justify-content: space-between;
    background: rgba(20,16,59,.8);
    box-shadow: 0 1em 1.5em rgba(0,0,0,0.15);
    backdrop-filter: blur(5em);
    z-index: 18;
    height: 4.75em;
    position: fixed;
    padding: 0 5%;
    top: 0;
    left: 0;
    right: 0;
    font-size: 16px;
    align-items: center;
  }
  .logo {
    height: 58px;
  }
  .mobile-menu-icon {

  }
  .nav {
    width: 292px;
    font-size: 16px;
    max-width: 100%;
    background: #261858;
    position: fixed;
    bottom: 0;
    top: 0;
    right: 0;

    transform: translateX(100%);
    display: flex;
    z-index: 17;
    opacity: 0;
    transition: transform linear 0.2s, opacity linear 0.2s;
    padding: 1.5em 1.5em;
    padding-top: 4.75em;

    box-sizing: border-box;
    flex-direction: column;

    &.overflow {
      overflow: auto;
    }
    &.show{
      transform: translateX(0%);
      opacity: 1;
    }

    .connectButton {
      width: 100%;
      border-radius: 0.25em;
      background: radial-gradient(
          123.41% 70.85% at 47.63% 49.99%,
          #558ada 0%,
          #1b68db 100%
      ) !important;
      cursor: pointer;
      height: 2.75em !important;
      padding: 0 1.688em;
      font-size: 1.125em !important;
      &.mobile {
        margin-top: 1.5em;
      }
    }

    .navItem {
      font-weight: bold;
      font-size: 1.125em;
      line-height: 1.5em;
      color: #ffffff;
      padding: 1.5em 0;
      text-decoration: none;

      &:not(:first-child) {
        border-top: 1px solid #3d2a84;
      }

      &.contact {
        border-top: none;
        color: #a796e1;
        font-weight: normal;
      }
      &.profile {
        flex-direction: row;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-right: 0.75em;
      }
      &.dash {
        border-bottom: 1px solid #3d2a84;
      }
    }

    .navChild {
      transform: translateX(100%);
      position: absolute;
      overflow: auto;
      top: 0;
      width: 100%;
      bottom: 0;
      padding-top: 4.75em;

      display: flex;
      flex-direction: column;
      background: #261858;
      // transition: transform linear 0.15s;
      &.show {
        transform: translateX(0%);
      }
      .navItem {
        font-weight: bold;
        font-size: 1.125em;
        line-height: 1.5em;
        color: #ffffff;
        padding: 1.5em 0;

        &:not(:first-child) {
          border-top: 1px solid #3d2a84;
        }

        &.contact {
          border-top: none;
          color: #a796e1;
          font-weight: normal;
        }

        &.profile {
          flex-direction: row;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .arrowIcon {
            transform: rotate(180deg);
            margin-right: 1.188em;
          }
          .lbl {
            flex: 1;
          }
        }
      }
    }

    .ipCkProfile {
      display: none;
      &:checked {
        ~ .navChild {
          transform: translateX(0%);
        }
      }
    }
  }
}
</style>