<script setup lang="ts">
  const burger=useBurgerStore()
  const auth=useAuthStore()
  const localePath = useLocalePath()
  const route=useRoute()
</script>
<template>
  <nav class="panel-nav"
    :class="{ open: burger.checked }"
    @blur="burger.toggle"
    @click="burger.toggle">
    <div class="nav-bar-up">
      <UiLangSelect />
      <button class="panel-item" v-if="auth.isLoggedIn" @click="auth.logout">{{ $t('nav.logout') }}</button>
    </div>
    <div class="nav-bar-down">
      <NuxtLink v-if="!auth.isLoggedIn && route.meta.pageId != 'signup'" class="panel-item" :to="localePath('signup')">{{ $t('nav.signup') }}</NuxtLink>
      <NuxtLink v-if="!auth.isLoggedIn && route.meta.pageId != 'login'" class="panel-item" :to="localePath('login')">{{ $t('nav.login') }}</NuxtLink>
      <NuxtLink v-if="auth.isLoggedIn && route.meta.pageId != 'profile'" class="panel-item" :to="localePath('profile')">{{ $t('nav.profile') }}</NuxtLink>
      <NuxtLink v-if="auth.isLoggedIn && route.meta.pageId != 'lists'" class="panel-item" :to="localePath('lists')">{{ $t('nav.lists') }}</NuxtLink>
      <NuxtLink v-if="route.meta.pageId != 'index'" class="panel-item" :to="localePath('index')">{{ $t('nav.home') }}</NuxtLink>
    </div>
  </nav>
</template> 