bemarket/src/components/market/TopMenu.vue

<template>
  <div>
    <div class="top-header" style="">
      <div class="header-menu">
        <a class="menu-item" href="/">
          <div class="item">Home</div>
        </a>
        <a class="menu-item" href="/">
          <div class="item active">
            Marketplace
            <div class="active-bottom"></div>
          </div
          >
        </a>
      </div>
      <div class="viewLogo">
        <a href="/">
          <img
            class="logo"
            alt="logo"
            src="@/assets/main/p1/icon_logo_b.png" />
        </a>
      </div>
      <div class="rightContainer">
        <div class="contact">
          <span class="span">Contact Us</span>
        </div>
        <button v-if="!walletCollected" @click="collectToWallet" class="general-btn connectButton">
          <span>Connect Wallet</span>
        </button>
        <img
          draggable="false"
          v-if="walletCollected"
          class="avatar"
          src="https://assets.thetanarena.com/cosmetic/avatar/3.png"
          alt="avatar"
          @click="infoPanelShow=!infoPanelShow"
        >
      </div>
    </div>
    <top-user-info v-if="infoPanelShow"></top-user-info>
  </div>
</template>

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

@Component({
  name: 'Navbar',
  components: { TopUserInfo }
})
export default class extends Vue {
  infoPanelShow = false
  bc = new BlockChain();

  get walletCollected() {
    return AppModule.walletConnected
  }

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

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

<style lang="scss" scoped>
.top-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  background: rgba(20, 16, 59, 0.8);
  box-shadow: 0 1em 1.5em rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(5em);
  z-index: 8;
  height: 5.25em;
  --tooltip-text-color: white;
  --tooltip-margin: 1.875em;
  --tooltip-arrow-size: 0.75em;
}

.top-header .header-menu {
  display: flex;
  height: 100%;
  position: relative;
  z-index: 1;
}

.top-header .header-menu .menu-item {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.top-header .header-menu .menu-item .item {
  font-weight: bold;
  font-size: 1.125em;
  color: #fff;
  height: 100%;
  align-items: center;
  justify-content: center;
  display: flex;
  background: #14103b;
  width: 13.438em;
  box-sizing: border-box;
}

.top-header .header-menu .menu-item .active {
  background: linear-gradient(
      90deg,
      #362b6d 73.48%,
      rgba(54, 43, 109, 0) 161.57%
  );
  margin-left: -2em;
  clip-path: polygon(15% 0, 100% 0, 85% 100%, 0 100%);
}

.active-bottom {
  border-bottom: 0.3125em #563cb8 solid;
  width: 120%;
  position: absolute;
  bottom: 0;
}

.top-header .viewLogo {
  position: absolute;
  align-self: center;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
}

.logo {
  height: 3rem;
}

.rightContainer {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  padding-right: 2.5em;
  z-index: 1;
}

.rightContainer .contact {
  margin-right: 1.875em;
}

.rightContainer .contact .span {
  cursor: pointer;
  font-size: 1.125em;
  color: #a796e1;
}

.connectButton {
  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;
}

.connectButton span {
  text-decoration: none;

  font-weight: bold;
  font-size: 1.125em;
  line-height: 1.33;
  color: white;
}

.avatar {
  width: 3.125em;
  height: 3.125em;
  border-radius: 1.563em;
  cursor: pointer;
}

@media (max-width: 767px) {

}
</style>