Bitflower/src/components/Nav.vue

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

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

let pathname = ref('')

const emit = defineEmits(["doSth"]);

const doSth = () => {
  emit('doSth')
}

onMounted(() => {
  pathname.value = window.location.pathname
  console.log(window.location.pathname);
})

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 = () => {
  doSth()
}

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 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="nav" @click="toHome">
        Home
      </div>
      <div class="nav" @click="toNFT">
        NFT
      </div>
      <div class="nav" @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 v-show="pathname !== '/'">
        <div class="button" v-show="!addressStore.address" @click="connectWallet">
          <img src="../assets/git-commit-line.svg" alt="commit">
          Connect Wallet
        </div>
        <div class="connect" v-if="addressStore.address">
          <img src="../assets/git-commit-line-black.svg" alt="commit">
          {{ addressStore.address.slice(0, 8) }}...{{ addressStore.address.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;
  border-bottom: 1px solid var(--vt-c-border);

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

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

    .navOne {
      font-family: HONOR Sans CN;
      font-size: 21px;
      font-style: normal;
      font-weight: 700;
      line-height: normal;
      padding: 0 60px;
      height: 100px;
      display: flex;
      align-items: center;
      margin-bottom: -25px;
      margin-top: -30px;
      border-right: 1px solid var(--vt-c-border);
      margin-left: 57px;
      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;
      }
    }
  }

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

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