frontend/src/components/Navbar/NavBar.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>