hns.ws/components/Sidebar.vue

81 lines
3.7 KiB
Vue
Raw Normal View History

2024-10-18 20:15:07 +00:00
<script setup>
const route = useRoute()
const { isDesktopOrTablet } = useDevice();
</script>
<template>
<ul class="sidebar" v-if="isDesktopOrTablet" >
<li>
<label>Getting Started</label>
<ul class="subcategory">
<li><NuxtLink to="/c/registrars/" :class="route.path === '/c/registrars/' ? 'highlight' : ''">
<span class="icon-registrars"></span><p>Registrars</p></NuxtLink></li>
<li><NuxtLink to="/c/tools/" :class="route.path === '/c/tools/' ? 'highlight' : ''">
<span class="icon-tools"></span><p>Tools</p></NuxtLink></li>
<li><NuxtLink to="/c/explorers/" :class="route.path === '/c/explorers/' ? 'highlight' : ''">
<span class="icon-cube"></span><p>Explorers</p></NuxtLink></li>
<li><NuxtLink to="/c/tutorials/" :class="route.path === '/c/tutorials/' ? 'highlight' : ''">
<span class="icon-tutorials"></span><p>Tutorials</p></NuxtLink></li>
</ul>
</li>
<li>
<label>Community</label>
<ul class="subcategory">
<li><NuxtLink to="/c/apps/" :class="route.path === '/c/apps/' ? 'highlight' : ''">
<span class="icon-apps"></span><p>Apps</p></NuxtLink></li>
<li><NuxtLink to="/c/domains/" :class="route.path === '/c/domains/' ? 'highlight' : ''">
<span class="icon-domains"></span><p>Domains</p></NuxtLink></li>
<li><NuxtLink to="/c/forums/" :class="route.path === '/c/forums/' ? 'highlight' : ''">
<span class="icon-forums"></span><p>Forums</p></NuxtLink></li>
<li><NuxtLink to="/c/chapters/" :class="route.path === '/c/chapters/' ? 'highlight' : ''">
<span class="icon-rings"></span><p>Chapters</p></NuxtLink></li>
<!--
<li><NuxtLink to="/c/social/" :class="route.path === '/c/social/' ? 'highlight' : ''">
<p>Social</p></NuxtLink></li>
-->
</ul>
</li>
<li>
<label>Professional</label>
<ul class="subcategory">
<li><NuxtLink to="/c/hosting/" :class="route.path === '/c/hosting/' ? 'highlight' : ''">
<span class="icon-hosting"></span><p>Hosting</p></NuxtLink></li>
<li><NuxtLink to="/c/companies/" :class="route.path === '/c/companies/' ? 'highlight' : ''">
<span class="icon-companies"></span><p>Companies</p></NuxtLink></li>
<!--
<li><NuxtLink to="/c/news/" :class="route.path === '/c/news/' ? 'highlight' : ''">
<span class="icon-news"></span><p>News</p></NuxtLink></li>
-->
</ul>
</li>
<li>
<label>Personal</label>
<ul class="subcategory">
<li><NuxtLink to="/c/portfolios/" :class="route.path === '/c/portfolios/' ? 'highlight' : ''">
<span class="icon-portfolio"></span><p>Portfolios</p></NuxtLink></li>
<li><NuxtLink to="/c/blogs/" :class="route.path === '/c/blogs/' ? 'highlight' : ''">
<span class="icon-blog"></span><p>Blogs</p></NuxtLink></li>
<!--
<li><NuxtLink to="/c/landing-pages/" :class="route.path === '/c/landing-pages/' ? 'highlight' : ''">
<span class="icon-landing"></span><p>Landing Pages</p></NuxtLink></li>
-->
</ul>
</li>
<li>
<label>Misc</label>
<ul class="subcategory">
<!--
<li><NuxtLink to="/c/onboarding/" :class="route.path === '/c/onboarding/' ? 'highlight' : ''">
<p>Onboarding</p></NuxtLink></li>
<li><NuxtLink to="/c/articles/" :class="route.path === '/c/articles/' ? 'highlight' : ''">
<p>Articles</p></NuxtLink></li>
-->
<li><NuxtLink to="/c/random/" :class="route.path === '/c/random/' ? 'highlight' : ''">
<span class="icon-random"></span><p>Random</p></NuxtLink></li>
</ul>
</li>
</ul>
</template>