216 lines
6.1 KiB
Vue
216 lines
6.1 KiB
Vue
<template>
|
|
<div class="navbar" :class="{ 'navbar--hidden': !showNavbar }">
|
|
<div class="navbar-inner">
|
|
<div class="navbar-icon">
|
|
<router-link to="/">
|
|
<img alt="logo" class="logo" src="/assets/img/vampir.png" />
|
|
</router-link>
|
|
</div>
|
|
<div class="navbar-text">
|
|
<router-link to="/">Bloodline</router-link>
|
|
</div>
|
|
<div class="navbar-center" v-if="!isMobile"></div>
|
|
<div class="navbar-end">
|
|
<div class="navbar-navigation mid-text" v-if="!isMobile">
|
|
<div
|
|
class="navbar-navigation-link"
|
|
v-for="link in links"
|
|
:key="link.name"
|
|
:class="{ active: link.name === route.name }"
|
|
@click="router.push(link.path)"
|
|
>
|
|
<div class="icon">
|
|
<img :src="link.icon" alt="" />
|
|
</div>
|
|
<div class="text">{{ link.title }}</div>
|
|
</div>
|
|
</div>
|
|
<div v-if="!isMobile">
|
|
<div v-if="!address" class="btn btn-immortal mid-text" @click="showPanel = true">Connect</div>
|
|
<div class="login-icon-desktop mid-text" v-else @click="showPanel = true">
|
|
<img :src="getblocky(address)" alt="avatar" />
|
|
<div>{{ getAddressShortName(walletStore.address) }}</div>
|
|
</div>
|
|
</div>
|
|
<div v-else @click="showPanel = true">
|
|
<div class="login-icon" v-if="!address">
|
|
<font-awesome-icon :icon="['fas', 'fa-arrow-right-to-bracket']" />
|
|
</div>
|
|
<div v-else>
|
|
<img :src="getblocky(address)" alt="avatar" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { storeToRefs } from "pinia";
|
|
import { ref, onMounted, onBeforeUnmount, inject } from "vue";
|
|
import { useWalletStoreV2 } from "@/stores/walletV2";
|
|
import { getblocky, getAddressShortName } from "@/helper/helper.js";
|
|
|
|
import { useRoute, useRouter } from "vue-router";
|
|
|
|
const emit = defineEmits(["showPanel"]);
|
|
|
|
const walletStore = useWalletStoreV2();
|
|
const { address } = storeToRefs(walletStore);
|
|
const isMobile = inject("isMobile");
|
|
const showPanel = inject("showPanel");
|
|
|
|
const router = useRouter();
|
|
const route = useRoute();
|
|
const showNavbar = ref(true);
|
|
const lastScrollPosition = ref(0);
|
|
|
|
function onScroll() {
|
|
const currentScrollPosition = window.pageYOffset || document.documentElement.scrollTop;
|
|
if (currentScrollPosition < 0) {
|
|
return;
|
|
}
|
|
showNavbar.value = currentScrollPosition < lastScrollPosition.value;
|
|
lastScrollPosition.value = currentScrollPosition;
|
|
}
|
|
|
|
const links = [
|
|
{
|
|
title: "Sacrifice",
|
|
name: "home",
|
|
path: "/",
|
|
icon: "/assets/img/sacrifice-icon.png",
|
|
},
|
|
{
|
|
title: "Cycle",
|
|
name: "cycle",
|
|
path: "/cycle",
|
|
icon: "/assets/img/cycle-icon.png",
|
|
},
|
|
{
|
|
title: "Profile",
|
|
name: "profile",
|
|
path: "/profile",
|
|
icon: "/assets/img/profile-icon.png",
|
|
},
|
|
];
|
|
|
|
onMounted(() => {
|
|
window.addEventListener("scroll", onScroll);
|
|
});
|
|
|
|
onBeforeUnmount(() => {
|
|
window.removeEventListener("scroll");
|
|
});
|
|
</script>
|
|
|
|
<style lang="sass" scoped>
|
|
.navbar
|
|
position: fixed
|
|
z-index: 3
|
|
box-sizing: border-box
|
|
background-color: #202020
|
|
width: 100%
|
|
transform: translate3d(0,0,0)
|
|
transition: transform .3s ease,visibility 0s .3s linear
|
|
height: 82px
|
|
@media (min-width: 992px)
|
|
height: 80px
|
|
// &.navbar--hidden
|
|
// transform: translate3d(0,-100%,0)
|
|
.navbar-inner
|
|
display: flex
|
|
padding: 16px 24px
|
|
box-sizing: border-box
|
|
height: 100%
|
|
align-items: center
|
|
@media (min-width: 992px)
|
|
padding: 16px 24px
|
|
.navbar-icon
|
|
img
|
|
height: 50px
|
|
width: 50px
|
|
@media (min-width: 992px)
|
|
height: 56px
|
|
width: 56px
|
|
|
|
.navbar-text
|
|
font-family: 'Vampire', sans-serif
|
|
font-size: 36px
|
|
margin-left: 16px
|
|
letter-spacing: 0.138em
|
|
line-height: 73.107px
|
|
@media (min-width: 992px)
|
|
font-size: 42px
|
|
a
|
|
text-decoration: none
|
|
color: white
|
|
.navbar-center
|
|
display: flex
|
|
margin-left: auto
|
|
.navbar-social-links
|
|
display: flex
|
|
gap: 18px
|
|
.social-bloodline-badge
|
|
font-size: 16px
|
|
padding: 8px 16px 8px 16px
|
|
border-radius: 14px
|
|
background-color: #0F0F0F
|
|
display: flex
|
|
&:hover,&:active,&:focus
|
|
background-color: lighten(#0F0F0F, 10%)
|
|
cursor: pointer
|
|
.social-bloodline-badge-icon
|
|
margin-right: 8px
|
|
.navbar-end
|
|
display: flex
|
|
margin-left: auto
|
|
gap: 80px
|
|
.navbar-navigation
|
|
display: flex
|
|
align-items: center
|
|
gap: 48px
|
|
.navbar-navigation-link
|
|
display: flex
|
|
gap: 8px
|
|
border-bottom: 2px solid transparent
|
|
&.active
|
|
border-bottom: 2px solid white
|
|
&:active, &:hover, &:focus
|
|
cursor: pointer
|
|
.icon
|
|
img
|
|
width: 20px
|
|
height: 20px
|
|
|
|
|
|
|
|
.login-icon
|
|
color: var(--white)
|
|
background-color: var(--purple)
|
|
padding: 8px
|
|
font-size: 25px
|
|
border-radius: 8px
|
|
width: 44px
|
|
height: 44px
|
|
display: flex
|
|
justify-content: center
|
|
align-items: center
|
|
img
|
|
width: 32px
|
|
height: 32px
|
|
border-radius: 8px
|
|
.login-icon-desktop
|
|
display: flex
|
|
padding: 8px
|
|
align-items: center
|
|
gap: 16px
|
|
border-radius: 16px
|
|
background: var(--Background-grey, #2D2D2D)
|
|
&:hover,&:active,&:focus
|
|
cursor: pointer
|
|
img
|
|
width: 32px
|
|
height: 32px
|
|
</style>
|