39 lines
1.5 KiB
Vue
39 lines
1.5 KiB
Vue
|
<script setup>
|
||
|
|
const route = useRoute()
|
||
|
|
|
||
|
|
const { isMobile, isDesktopOrTablet } = useDevice();
|
||
|
|
|
||
|
|
const menu = ref(false)
|
||
|
|
|
||
|
|
function openMenu() { menu.value = true }
|
||
|
|
function closeMenu() { menu.value = false }
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<header>
|
||
|
|
<div class="nav">
|
||
|
|
<NuxtLink to="/" class="logo" @click="closeMenu()">HNS↗WS</NuxtLink>
|
||
|
|
<ul class="links" v-if="isDesktopOrTablet" >
|
||
|
|
<li><NuxtLink to="https://decentralizers.com/" target="_Blank">News</NuxtLink></li>
|
||
|
|
<li><NuxtLink to="/submit" :class="route.path === '/submit' ? 'highlight' : ''">Submit Site</NuxtLink></li>
|
||
|
|
<li><NuxtLink to="https://git.inspin.io/ryan/hns.ws/releases" target="_Blank">Changelog</NuxtLink></li>
|
||
|
|
</ul>
|
||
|
|
<div class="search">
|
||
|
|
<input placeholder="Enter a Handshake address">
|
||
|
|
<a class="redirect"><span class="icon-arrow-right"></span></a>
|
||
|
|
</div>
|
||
|
|
<div class="menu-btn" v-if="isMobile" >
|
||
|
|
<span v-if="!menu" class="icon-menu" @click="openMenu()"></span>
|
||
|
|
<span v-if="menu" class="icon-x" @click="closeMenu()"></span>
|
||
|
|
</div>
|
||
|
|
<div class="menu" v-if="menu">
|
||
|
|
<ul class="links" @click="closeMenu()">
|
||
|
|
<li><NuxtLink to="/about">About</NuxtLink></li>
|
||
|
|
<li><NuxtLink to="https://decentralizers.com/" target="_Blank">News</NuxtLink></li>
|
||
|
|
<li><NuxtLink to="/submit">Submit Site</NuxtLink></li>
|
||
|
|
<li><NuxtLink to="https://git.inspin.io/ryan/hns.ws/releases" target="_Blank">Changelog</NuxtLink></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
</template>
|