explorer-app/components/Navigation/Index.vue
2024-10-03 15:53:44 +02:00

262 lines
5.4 KiB
Vue

<script setup lang="ts">
const showMenu = ref(false)
const isInfoBarHidden = useLocalStorage('isInfoBarHidden', true)
const route = useRoute()
const isProjectDetailRoute = computed(() => {
return route.fullPath.includes('/project/') && !route.fullPath.includes('create') && !route.fullPath.includes('edit')
})
</script>
<template>
<NavigationHamburgerMenu v-if="showMenu" />
<div
flex
flex-col
items-center
w-full
top-0
z-100
bg-black
overflow-hidden
border="b-1px white/20"
>
<div
relative
app-container
w-full
h-full
>
<img
absolute
lg="left-10px"
left--30px
top--25px
z-101
w-130px
object-cover
src="/web3privacy_eye.webp"
duration-200ms
opacity-30
>
</div>
<div
app-container
flex
items-center
justify-between
h-80px
py-6
gap-24px
lg:pl-118px
>
<div
flex
items-center
gap-16px
z-105
>
<UnoIcon
shrink-0
i-web-hamburger
text-24px
w-24px
h-24px
lg:hidden
@click="showMenu ? showMenu = false : showMenu = true"
/>
<NuxtImg
w-full
max-w-124px
lg="max-w-full"
src="/explorer.webp"
cursor-pointer
@click="navigateTo('/')"
/>
</div>
<div
w-full
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-14px
font-400
>
About
</NuxtLink>
<NuxtLink
py-2
px-4
cursor-pointer
text-app-text-grey
class="hover:text-[#c2c2c2]"
hover:underline
underline-offset-1
text-14px
font-400
to="/"
>
Scoring
</NuxtLink>
<NuxtLink
flex
items-center
gap-4px
py-2
px-4
cursor-pointer
text-app-text-grey
class="hover:text-[#c2c2c2]"
hover:underline
underline-offset-1
text-14px
font-400
to="https://github.com/web3privacy/privacy-projects-db"
>
Learn how to contribute
<UnoIcon
i-web-arrowright
text-16px
w-16px
h-16px
/>
</NuxtLink>
</div>
<div
w-full
grow-0
flex
justify-end
items-center
lg:grow-0
gap-16px
>
<NuxtLink
v-if="useRoute().path !== '/project/create'"
hidden
sm:block
shrink-0
text-14px
font-400
opacity-50
hover:opacity-100
to="/project/create"
mr-16px
>
+ Add Project
</NuxtLink>
<div
hidden
xxl:flex
gap-12px
>
<span
shrink-0
text-14px
leading-24px
font-400
opacity-50
>Created by:</span>
<NuxtLink
target="_blank"
to="https://web3privacy.info/"
flex
justify-center
>
<NuxtImg
max-w-103px
w-full
src="/logo.svg"
/>
</NuxtLink>
</div>
<div class="hidden xxl:block w-1px h-40px bg-white/10" />
<NuxtLink
target="_blank"
to="https://twitter.com/web3privacy"
>
<UnoIcon
i-web-twitter_x
text-18px
w-18px
h-18px
sm="text-20px w-20px h-20px"
opacity-50
hover:opacity-100
/>
</NuxtLink>
<NuxtLink
hidden
sm:block
target="_blank"
to="https://t.me/web3privacynow"
>
<UnoIcon
i-web-telegram1
text-20px
w-20px
h-20px
sm="text-24px w-24px h-24px"
opacity-50
hover:opacity-100
/>
</NuxtLink>
<NuxtLink
hidden
sm:block
target="_blank"
to="https://matrix.to/#/#web3privacy:gwei.cz"
>
<UnoIcon
i-web-matrix
text-20px
w-20px
h-20px
sm="text-24px w-24px h-24px"
opacity-50
hover:opacity-100
/>
</NuxtLink>
<NuxtLink
target="_blank"
to="https://github.com/web3privacy"
>
<UnoIcon
i-web-github
text-20px
w-20px
h-20px
sm="text-24px w-24px h-24px"
opacity-50
hover:opacity-100
/>
</NuxtLink>
</div>
</div>
</div>
<NavigationInfoBar
v-if="!isInfoBarHidden"
v-model="isInfoBarHidden"
/>
<div
v-if="isProjectDetailRoute"
z-99
static
duration-200ms
>
<ProjectNavigation
mt-16px
/>
</div>
</template>