cindylouwho/ImmortalClanVue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update tokens + desktop version

Browse Source
This commit is contained in:
EmberSpirit
2023-09-21 19:08:03 +02:00
parent 9330168af2
commit 1b2ea9b2a2
21 changed files with 880 additions and 1172 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Navbar.vue
+107 -45
View File
@@ -1,37 +1,3 @@
<script setup>
import { storeToRefs } from "pinia";
import { ref, onMounted, onBeforeUnmount, inject } from "vue";
import { useWalletStoreV2 } from "@/stores/walletV2";
import { getblocky } from "@/helper/helper.js";
const emit = defineEmits(["showPanel"]);
const walletStore = useWalletStoreV2();
const { connected, address } = storeToRefs(walletStore);
const isMobile = inject("isMobile");
const showPanel = inject("showPanel");
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;
}
onMounted(() => {
window.addEventListener("scroll", onScroll);
});
onBeforeUnmount(() => {
window.removeEventListener("scroll");
});
</script>
<template>
<header>
<div class="navbar" :class="{ 'navbar--hidden': !showNavbar }">
@@ -45,32 +11,47 @@ onBeforeUnmount(() => {
<router-link to="/">Bloodline</router-link>
</div>
<div class="navbar-center" v-if="!isMobile">
<div class="navbar-social-links">
<div class="social-bloodline-badge">
<div class="social-bloodline-badge-icon">
<font-awesome-icon icon="fa-brands fa-discord" />
<!-- <div class="navbar-social-links">
<div class="social-bloodline-badge">
<div class="social-bloodline-badge-icon">
<font-awesome-icon icon="fa-brands fa-discord" />
</div>
<div class="social-bloodline-badge-text">Discord</div>
</div>
<div class="social-bloodline-badge">
<div class="social-bloodline-badge-icon">
<font-awesome-icon icon="fa-brands fa-telegram" />
<div class="social-bloodline-badge-icon">
<font-awesome-icon icon="fa-brands fa-telegram" />
</div>
<div class="social-bloodline-badge-text">Telegram</div>
</div>
<div class="social-bloodline-badge">
<div class="social-bloodline-badge-icon">
<font-awesome-icon icon="fa-brands fa-twitter" />
<div class="social-bloodline-badge-icon">
<font-awesome-icon icon="fa-brands fa-twitter" />
</div>
<div class="social-bloodline-badge-text">Twitter</div>
</div>
</div>
</div> -->
</div>
<div class="navbar-end">
<div class="navbar-navigation mid-text" v-if="!isMobile && connected">
<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="!connected" class="btn btn-immortal" @click="walletStore.connectWallet">connect</div> -->
<div v-if="!address" class="btn btn-immortal" @click="showPanel = true">connect</div>
<span v-else @click="showPanel = true"> test</span>
<div v-if="!address" class="btn btn-immortal mid-text" @click="showPanel = true">connect</div>
<!-- <span v-else @click="showPanel = true"> test</span> -->
<div v-else @click="showPanel = true"><img :src="getblocky(address)" alt="avatar" /></div>
</div>
<div v-else @click="showPanel = true">
<div class="login-icon" v-if="!address">
@@ -84,8 +65,70 @@ onBeforeUnmount(() => {
</header>
</template>
<script setup>
import { storeToRefs } from "pinia";
import { ref, onMounted, onBeforeUnmount, inject } from "vue";
import { useWalletStoreV2 } from "@/stores/walletV2";
import { getblocky } from "@/helper/helper.js";
import { useRoute, useRouter } from "vue-router";
const emit = defineEmits(["showPanel"]);
const walletStore = useWalletStoreV2();
const { connected, 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>
header
// margin-bottom: 82px
// @media (min-width: 992px)
// margin-bottom: 128px
.navbar
position: fixed
z-index: 3
@@ -142,6 +185,25 @@ header
.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
&.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)