37 lines
1.1 KiB
Vue
37 lines
1.1 KiB
Vue
<script setup lang="ts">
|
|
import { storeToRefs } from 'pinia'
|
|
import { usePageStore } from '~/stores/pages'
|
|
|
|
import logo from 'assets/images/logo.avif'
|
|
|
|
const pageStore = usePageStore()
|
|
const { pages } = storeToRefs(pageStore)
|
|
|
|
const links = toRaw(pages.value).filter((page) => page.path !== '/')
|
|
</script>
|
|
|
|
<template>
|
|
<nav
|
|
class="flex flex-row flex-wrap lm:flex-row lt:flex-row sm:flex-col lg:flex-row justify-around sm:justify-start lm:justify-between lt:justify-between lg:justify-between gap-2 lg:gap-4"
|
|
>
|
|
<Logo
|
|
:src="logo"
|
|
alt="Endermanch"
|
|
title="Enderman"
|
|
description="official website"
|
|
/>
|
|
<ul
|
|
class="flex flex-row flex-wrap items-center sm:items-start lm:items-center lt:items-center lg:items-center justify-center gap-4 m-2 sm:m-0 lm:mx-2 lt:mx-2 lg:mx-2 sm:my-2 lg:my-0"
|
|
>
|
|
<li v-for="(page, index) in links" :key="index" class="nav-item">
|
|
<Route
|
|
:path="page.path"
|
|
:name="page.name"
|
|
:icon="page.icon!.src"
|
|
:alt="page.icon!.alt"
|
|
/>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</template>
|