explorer-app/components/Navigation.vue
2023-12-19 18:43:42 +01:00

132 lines
6.6 KiB
Vue

<script lang="ts" setup>
const route = useRoute()
const isProjectRoute = computed(() => {
return route.fullPath.includes('/project/')
})
const showMenu = ref(false)
const { showBar, showText } = storeToRefs(useNavigaiton())
const { width } = useWindowSize()
const { y } = useWindowScroll()
watch(y, (newY, oldY) => {
if (newY < oldY && newY < 10)
showText.value = true
else
showText.value = false
})
</script>
<template>
<div v-if="showMenu" w-full flex flex-col items-center>
<NuxtLink to="https://beta.web3privacy.info/" bg-black hover:bg-white w-full text-center justify-center py-14px cursor-pointer text-app-text-grey class="hover:text-black" hover:underline underline-offset-1 text-16px font-400 uppercase>
HOME
</NuxtLink>
<NuxtLink bg-black hover:bg-white w-full text-center justify-center py-14px cursor-pointer text-white class="hover:text-black" hover:underline underline-offset-1 text-16px font-400 to="/">
PROJECTS
</NuxtLink>
<NuxtLink to="https://beta.web3privacy.info/events/" bg-black hover:bg-white w-full text-center justify-center py-14px cursor-pointer text-app-text-grey class="hover:text-black" hover:underline underline-offset-1 text-16px font-400 uppercase>
EVENTS
</NuxtLink>
<NuxtLink bg-black hover:bg-white w-full justify-center to="https://mirror.xyz/0x0f1F3DAf416B74DB3DE55Eb4D7513a80F4841073/" flex items-center py-14px cursor-pointer text-app-text-grey class="hover:text-black" hover:underline underline-offset-1 text-16px font-400 uppercase>
ARTICLES
<UnoIcon ml-10px i-web-open1 text-11px />
</NuxtLink>
<NuxtLink bg-black hover:bg-white w-full justify-center to="https://docs.web3privacy.info/" flex items-center py-14px cursor-pointer text-app-text-grey class="hover:text-black" hover:underline underline-offset-1 text-16px font-400 uppercase>
DOCS
<UnoIcon ml-10px i-web-open1 text-11px />
</NuxtLink>
</div>
<div w-full sticky md:relative top-0 z-100 bg-black lg:bg-app-bg-dark_grey>
<div v-if="!isProjectRoute" relative app-container w-full h-full>
<img
absolute w-full h-167px sm:h-207px md:h-303px object-cover src="/web3privacy_eye.webp" z-101
class="object-pos-custom left--11% top-0 max-w-250px sm:max-w-335px md:max-w-588px"
:class="[(!showText && width < 768) ? 'opacity-0' : 'opacity-10', (!showText && width < 768) ? 'translate-y--128px' : 'translate-y-0px']" duration-200ms
>
</div>
<div app-container flex items-center justify-between h-80px py-6 gap-24px>
<div flex gap-16px w-full relative z-105>
<UnoIcon shrink-0 i-web-hamburger text-24px lg:hidden @click="showMenu ? showMenu = false : showMenu = true" />
<NuxtImg max-w-160px w-full src="/logo.svg" cursor-pointer @click="navigateTo('/')" />
</div>
<div hidden lg:flex items-center justify-center>
<NuxtLink to="https://beta.web3privacy.info/" py-2 px-4 cursor-pointer text-app-text-grey class="hover:text-[#c2c2c2]" hover:underline underline-offset-1 text-16px font-400 uppercase>
HOME
</NuxtLink>
<NuxtLink py-2 px-4 cursor-pointer text-white class="hover:text-[#c2c2c2]" hover:underline underline-offset-1 text-16px font-400 to="/">
DASHBOARD
</NuxtLink>
<NuxtLink to="https://beta.web3privacy.info/events/" py-2 px-4 cursor-pointer text-app-text-grey class="hover:text-[#c2c2c2]" hover:underline underline-offset-1 text-16px font-400 uppercase>
EVENTS
</NuxtLink>
<NuxtLink to="https://mirror.xyz/0x0f1F3DAf416B74DB3DE55Eb4D7513a80F4841073/" flex items-center py-2 px-4 cursor-pointer text-app-text-grey class="hover:text-[#c2c2c2]" hover:underline underline-offset-1 text-16px font-400 uppercase>
ARTICLES
<UnoIcon ml-10px i-web-open1 text-11px />
</NuxtLink>
<NuxtLink to="https://docs.web3privacy.info/" flex items-center py-2 px-4 cursor-pointer text-app-text-grey class="hover:text-[#c2c2c2]" hover:underline underline-offset-1 text-16px font-400 uppercase>
DOCS
<UnoIcon ml-10px i-web-open1 text-11px />
</NuxtLink>
</div>
<div w-full h-full flex justify-end items-start lg:grow-0 gap-3 lg:gap-6 pt-1 lg:pt-2.5>
<NuxtLink to="https://twitter.com/web3privacy">
<UnoIcon target="_blank" i-web-twitter_x text-18px sm:text-24px opacity-50 hover:opacity-100 />
</NuxtLink>
<NuxtLink to="https://t.me/web3privacynow">
<UnoIcon target="_blank" i-web-telegram1 text-20px sm:text-24px opacity-50 hover:opacity-100 />
</NuxtLink>
<NuxtLink to="https://matrix.to/#/#web3privacy:gwei.cz">
<UnoIcon target="_blank" i-web-matrix text-20px sm:text-24px opacity-50 hover:opacity-100 />
</NuxtLink>
<NuxtLink to="https://github.com/web3privacy" target="_blank">
<UnoIcon i-web-github text-20px sm:text-24px opacity-50 hover:opacity-100 />
</NuxtLink>
</div>
</div>
</div>
<div
v-if="isProjectRoute" top-96px z-99 sticky md:static
:class="[(!showBar && width < 768) ? 'translate-y--128px' : 'translate-y-0px']" duration-200ms
>
<ProjectNavigation md:mt-16px />
</div>
<div v-else bg-black lg:bg-app-bg-dark_grey>
<div
app-container flex items-center gap-32px pb-16px pt-16px sm:pb-32px
>
<div w-full flex flex-col items-center :class="[!showText && width < 768 ? 'opacity-0' : 'opacity-100']" duration-200ms relative z-101>
<img src="/explorer.webp" max-w-155px sm:max-w-342px>
<p mt-24px hidden md:block text-14px text-center font-400 leading-24px text-app-text-grey>
{{ 'There are challenges in finding crucial technical details and comparing various privacy-focused projects.' }}<br>
{{ 'To address this, we created a platform that standardizes and expands the current ' }}
<NuxtLink to="https://web3privacy.info/" target="_blank" underline text-white>
{{ 'Web3Privacy ecosystem research.' }}
</NuxtLink><br>
{{ 'Our goal is to make this valuable information accessible to the wider Web3 community.' }}
</p>
<NuxtLink
to="https://github.com/web3privacy/privacy-projects-db"
target="_blank"
mt-12px flex text-14px items-center gap-8px sm:text-16px hover:underline
>
{{ 'Learn how to contribute' }}
<UnoIcon i-heroicons-solid-arrow-right text-24px />
</NuxtLink>
</div>
</div>
</div>
</template>
<style scoped>
.object-pos-custom {
object-position: top 20% right 0%;
}
@media only screen and (min-width: 768px) {
.object-pos-custom {
object-position: top 40% right 0%;
}
}
</style>