Bitflower/src/components/Nav.vue

<script setup lang="ts">
import {onMounted, ref } from 'vue';
import {useSunStore,useAddressStore} from "@/stores/sun";
import router from "@/router";
import eventBus from '../libs/eventBus'

const sunStore = useSunStore()
const addressStore = useAddressStore()

let pathname = ref(window.location.pathname)

onMounted(() => {

})

const sunAndMoon = () => {
  if (sunStore.sun) {
    document.documentElement.style.setProperty('--color-background', '#000000')
    document.documentElement.style.setProperty('--color-text', '#f2f2f2')
    document.documentElement.style.setProperty('--vt-c-border', '#555555')
    document.documentElement.style.setProperty('--vt-c-pure', '#000000')
  } else {
    document.documentElement.style.setProperty('--color-background', '#fcfffa')
    document.documentElement.style.setProperty('--color-text', '#181818')
    document.documentElement.style.setProperty('--vt-c-border', '#f1f1f1')
    document.documentElement.style.setProperty('--vt-c-pure', '#ffffff')
  }
  sunStore.change()
}

const connectWallet = () => {
  if (pathname.value === '/'){
    eventBus.emit('zksConnectWallet')
  }else if(pathname.value === '/starkNet'){
    eventBus.emit('starkConnectWallet')
  }else if(pathname.value === '/layerZero'){
    eventBus.emit('layerConnectWallet')
  }
}

// const toHome = () => {
//   router.push('/')
// }

// const toAirdrop = () => {
//   router.push('/zksync')
// }
//
// let lod = false
//
// const toNFT = () => {
//   if (lod){
//     return
//   }
//   lod = true
//   router.push('/')
//   setTimeout(function (){
//     let NFT = document.querySelector('#NFT')
//     if(NFT){
//       NFT.scrollIntoView({
//         behavior: "smooth"
//       })
//       lod = false
//     }
//   },200)
//
// }
</script>

<template>
  <div class="topBar">
    <div class="left">
      <div style="z-index: 1;" class="img">
        <img  v-show="!sunStore.sun" src="../assets/bitflower-white.svg" alt="bitflower">
<!--        <img  v-show="sunStore.sun" src="../assets/bitflower.svg" alt="logo">-->
      </div>
<!--      <div class="nav1" @click="toHome">-->
<!--        Home-->
<!--      </div>-->
<!--      <div class="nav1" @click="toNFT">-->
<!--        NFT-->
<!--      </div>-->
<!--      <div class="nav1" @click="toAirdrop">-->
<!--        Airdrop-->
<!--      </div>-->
    </div>
    <div class="right">
<!--      <img v-show="!sunStore.sun" @click="sunAndMoon" src="../assets/sun-fill.svg" alt="sun-fill">-->
<!--      <img v-show="sunStore.sun" @click="sunAndMoon" src="../assets/moon-clear-fill.svg" alt="moon-clear-fill">-->
      <div>
        <div class="button" v-show="(!addressStore.address && pathname !== '/starkNet') || (!addressStore.starkNetAddress && pathname === '/starkNet')" @click="connectWallet">
          <img src="../assets/git-commit-line.svg" alt="commit">
          Connect Wallet
        </div>
        <div class="connect" v-if="addressStore.address && pathname !== '/starkNet'">
          <img src="../assets/git-commit-line-black.svg" alt="commit">
          {{  addressStore.address.slice(0, 8) }}...{{ addressStore.address.slice(-4) }}
        </div>
        <div class="connect" v-if="addressStore.starkNetAddress && pathname === '/starkNet'">
          <img src="../assets/git-commit-line-black.svg" alt="commit">
          {{ addressStore.starkNetAddress.slice(0, 8) }}...{{ addressStore.starkNetAddress.slice(-4) }}
        </div>
      </div>

    </div>
  </div>
</template>

<style scoped lang="scss">
.topBar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 60px 25px;
  //margin: 0 -60px;

  .left {
    display: flex;
    align-items: center;

    .img{
      padding-right: 60px;
    }

    .nav {
      font-family: HONOR Sans CN;
      font-size: 21px;
      font-style: normal;
      font-weight: 700;
      line-height: normal;
      padding: 0 60px;
      height: 100px;
      display: flex;
      width: 200px;
      justify-content: center;
      align-items: center;
      margin-bottom: -25px;
      margin-top: -30px;
      border-right: 1px solid var(--vt-c-border);
      border-left: 1px solid var(--vt-c-border);
      position: relative;
      cursor: pointer;

      .line {
        position: absolute;
        width: 100%;
        height: 10px;
        background: var(--color-text);
        left: 0;
        bottom: 0;
      }
    }
    .nav1{
      font-family: HONOR Sans CN;
      font-size: 21px;
      font-style: normal;
      font-weight: 700;
      line-height: normal;
      padding: 0 60px;
      height: 100px;
      display: flex;
      width: 200px;
      justify-content: center;
      align-items: center;
      margin-bottom: -25px;
      margin-top: -30px;
      //border-right: 1px solid var(--vt-c-border);
      //border-left: 1px solid var(--vt-c-border);
      position: relative;
      cursor: pointer;
    }

    .nav:hover{
      background: rgba(255, 255, 255, 0.30);
      backdrop-filter: blur(12px);
    }
    .nav1:hover{
      background: rgba(255, 255, 255, 0.30);
      backdrop-filter: blur(12px);
    }

  }

  .mid {
    font-weight: 400;
    font-size: 15px;
    line-height: 21px;
    font-family: 'Chillax';
    text-transform: uppercase;
  }

  .right {
    display: flex;
    align-items: center;
    gap: 40px;
    cursor: pointer;

    .button {
      width: fit-content;
      height: 44px;
      display: flex;
      align-items: center;
      gap: 6px;
      background: #010101;
      padding: 0 24px;
      font-weight: 500;
      font-size: 15px;
      line-height: 20px;
      color: #FFFFFF;
      cursor: pointer;
      border: 1px solid #4C4C4C;

    }

    .connect {
      width: fit-content;
      height: 44px;
      display: flex;
      align-items: center;
      gap: 6px;
      background: #FFFFFF;
      border: 1px solid #010101;
      border-radius: 30px;
      padding: 0 24px;
      font-weight: 500;
      font-size: 15px;
      line-height: 20px;
      color: #010101;
    }
  }
}
</style>