56 lines
2.0 KiB
Vue
56 lines
2.0 KiB
Vue
<script setup>
|
|
const route = useRoute()
|
|
|
|
const { isMobile, isDesktopOrTablet } = useDevice();
|
|
|
|
const menu = ref(false)
|
|
const query = ref('')
|
|
|
|
const search = async() => {
|
|
if (query.value) {
|
|
// remove protocol
|
|
let input = query.value.replace(/(^\w+:|^)\/\//, '')
|
|
|
|
// split into domain and path
|
|
let [domain, ...paths] = input.split('/')
|
|
let path = paths.join('/')
|
|
|
|
navigateTo('http://' + domain + '.hns.ws/' + path, {
|
|
external: true
|
|
})
|
|
}
|
|
}
|
|
|
|
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="/about">About</NuxtLink></li>
|
|
<li class="nohns"><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>
|
|
<form @submit.prevent="search" class="search">
|
|
<input v-model="query" placeholder="Enter a Handshake address">
|
|
<a @click="search" class="redirect"><span class="icon-arrow-right"></span></a>
|
|
</form>
|
|
<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> |