web3privacy/explorer-app
1
0
Fork 0
mirror of https://github.com/web3privacy/explorer-app.git synced 2024-10-15 16:46:26 +02:00
Code Issues Projects Releases Packages Wiki Activity
explorer-app/components/Navigation.vue
DomWane 241776eaf1 feat: form & github api
2024-09-12 18:03:06 +02:00

446 lines
9.2 KiB
Vue
Raw Permalink Blame History

<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://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://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 && !route.fullPath.includes('create') && !route.fullPath.includes('edit')"
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://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://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
v-if="!route.fullPath.includes('create') && !route.fullPath.includes('edit')"
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>
Reference in a new issue View git blame Copy permalink