169 lines
3.5 KiB
Vue
169 lines
3.5 KiB
Vue
<script setup>
|
|
import { computed, h, onMounted, ref, watch } from 'vue'
|
|
import { NMenu, NButton, NDrawer, NIcon } from 'naive-ui'
|
|
import MenuIcon from '@/components/Navbar/MenuIcon.vue'
|
|
import { RouterLink, useRoute } from 'vue-router'
|
|
import { useAuthStore } from '@/stores/authStore'
|
|
|
|
const authStore = useAuthStore()
|
|
|
|
const showMobileMenu = ref(false)
|
|
|
|
const route = useRoute()
|
|
const activeKey = ref('collection')
|
|
|
|
const mainMenu = computed(() => {
|
|
return [
|
|
{ label: 'Collection', key: 'collection' },
|
|
{ label: 'Charts', key: 'charts' },
|
|
{ label: 'Parsers', key: 'parsers' },
|
|
{ label: 'Zero prices', key: 'zeroprices' },
|
|
]
|
|
})
|
|
|
|
const authMenu = computed(() => {
|
|
if (!authStore.isAuthenticated) {
|
|
return [
|
|
{ label: 'Login', key: 'login' }
|
|
]
|
|
}
|
|
|
|
return [
|
|
{ label: 'Labels', key: 'labels' },
|
|
{ label: 'Personal', key: 'personal' },
|
|
]
|
|
})
|
|
|
|
const windowWidth = ref(window.innerWidth)
|
|
|
|
onMounted(() => {
|
|
const handleResize = () => {
|
|
windowWidth.value = window.innerWidth
|
|
}
|
|
window.addEventListener('resize', handleResize)
|
|
return () => window.removeEventListener('resize', handleResize)
|
|
})
|
|
|
|
|
|
watch(() => route.name, (newName) => {
|
|
activeKey.value = newName
|
|
})
|
|
|
|
const renderLabel = (option) => {
|
|
return h(
|
|
RouterLink,
|
|
{
|
|
to: { name: option.key },
|
|
class: 'nav-link',
|
|
style: 'text-decoration: none; color: inherit;'
|
|
},
|
|
{ default: () => option.label }
|
|
)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<header class="navbar">
|
|
<div class="logo">Merch tracker</div>
|
|
|
|
<n-menu
|
|
class="main-menu"
|
|
:options="mainMenu"
|
|
mode="horizontal"
|
|
:collapsed="false"
|
|
:value="activeKey"
|
|
@update:value="activeKey = $event"
|
|
v-if="authStore.isAuthenticated && windowWidth > 768"
|
|
:render-label="renderLabel"
|
|
/>
|
|
|
|
<div class="auth-menu-container">
|
|
<n-menu
|
|
class="auth-menu"
|
|
:options="authMenu"
|
|
mode="horizontal"
|
|
:collapsed="false"
|
|
:value="activeKey"
|
|
@update:value="activeKey = $event"
|
|
v-if="windowWidth > 768"
|
|
:render-label="renderLabel"
|
|
/>
|
|
</div>
|
|
|
|
<n-button
|
|
class="menu-mobile-button"
|
|
@click="showMobileMenu = !showMobileMenu"
|
|
>
|
|
<n-icon :size="34">
|
|
<MenuIcon />
|
|
</n-icon>
|
|
</n-button>
|
|
|
|
<n-drawer v-model:show="showMobileMenu" placement="right">
|
|
<n-menu
|
|
:options="authStore.isAuthenticated ? [...mainMenu, ...authMenu] : authMenu"
|
|
mode="vertical"
|
|
:value="activeKey"
|
|
@update:value="activeKey = $event; showMobileMenu = false"
|
|
:render-label="renderLabel"
|
|
/>
|
|
</n-drawer>
|
|
</header>
|
|
</template>
|
|
|
|
<style>
|
|
.navbar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 20px;
|
|
height: 60px;
|
|
background: #fff;
|
|
border-bottom: 2px solid #18a058;
|
|
position: relative;
|
|
z-index: 10;
|
|
}
|
|
|
|
.logo {
|
|
font-weight: bold;
|
|
font-size: 1.2rem;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.main-menu {
|
|
display: flex;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.auth-menu-container {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-left: auto;
|
|
min-width: 250px;
|
|
padding-right: 16px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.auth-menu {
|
|
margin-left: 20px;
|
|
}
|
|
|
|
.menu-mobile-button {
|
|
display: none;
|
|
width: 34px;
|
|
height: 34px;
|
|
padding: 0;
|
|
margin: 0;
|
|
border-radius: 8px;
|
|
background: transparent;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.menu-mobile-button {
|
|
display: inline-flex;
|
|
}
|
|
}
|
|
</style>
|