explorer-app/components/Navigation/Index.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
  >
    <div
      relative
      app-container
      w-full
      h-full
    >
      <img
        absolute
        lg="left--30px"
        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>