initial commit

2023-06-10 12:14:46 +02:00
commit 879e30d250
37 changed files with 13394 additions and 0 deletions
@@ -0,0 +1,90 @@
+<script setup>
+import { storeToRefs } from "pinia";
+import { ref, onMounted, onBeforeUnmount } from "vue";
+import { useWalletStore } from "@/stores/wallet";
+const walletStore = useWalletStore();
+const { connected, address } = storeToRefs(walletStore);
+
+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 }">
+			<div class="navbar-inner">
+				<div class="navbar-icon">
+					<router-link to="/">
+						<!-- <img alt="Parry logo" class="logo" src="@/assets/img/logo.svg" /> -->
+						<img alt="logo" class="logo" src="@/assets/img/vampir.png" />
+					</router-link>
+				</div>
+				<div class="navbar-center"></div>
+				<div class="navbar-end">
+					<button v-if="!connected" @click="walletStore.connectWallet">connect</button>
+					<span v-else> {{ address }}</span>
+				</div>
+			</div>
+		</div>
+	</header>
+</template>
+
+<style lang="sass" scoped>
+header
+    .navbar
+        position: fixed
+        z-index: 3
+        box-sizing: border-box
+        background-color: grey
+        width: 100%
+        transform: translate3d(0,0,0)
+        transition: transform .3s ease,visibility 0s .3s linear
+        &.navbar--hidden
+            transform: translate3d(0,-100%,0)
+        .navbar-inner
+            display: flex
+            justify-content: space-between
+            padding: 0 20px
+            @media (min-width: 992px)
+                padding: 10px 80px
+            .navbar-center
+                display: flex
+                align-items: center
+                .main-menu-links
+                    margin-right: 48px
+                    &:hover, &:active, &:focus
+                        color: lighten(black, 20%)
+                    .main-menu-link
+                        cursor: pointer
+            .navbar-end
+                display: flex
+                align-items: center
+                align-self: center
+                a
+                    color: black
+                    &:hover,&:focus, &:active
+                        color: lighten(black, 20%)
+
+                .navbar-hamburger-open
+                    font-size: 35px
+                .parry-twitter
+                    font-size: 30px
+                    margin-left: 32px
+</style>