rss-reader/vue/src/components/AppNav.vue

<script setup>
import { ref, computed, onMounted } from 'vue'
import { RouterLink, useRouter, useRoute } from 'vue-router'
import { useFeeds, logout as logoutSession } from '@/composables/useFeeds'
import Modal from './modal/AddUrl.vue'

const router = useRouter()
const route = useRoute()
const { sync, showModal, viewMode, toggleViewMode, layout, toggleLayout, markAllRead, feeds } = useFeeds()

const headerRef = ref(null)

onMounted(() => {
  const h = headerRef.value?.getBoundingClientRect().height ?? 0
  document.documentElement.style.setProperty('--app-nav-height', `${h}px`)
})

const onFeedsPage = computed(() => route.path === '/feeds')

const unreadCount = computed(() => feeds.value.filter(f => !f.read).length)

const menuOpen = ref(false)

function toggleMenu() {
  menuOpen.value = !menuOpen.value
}

function closeMenu() {
  menuOpen.value = false
}

async function logout() {
  await logoutSession()
  closeMenu()
  router.push({ name: 'login' })
}

function handleSync() {
  sync()
  closeMenu()
}

function handleMarkAllRead() {
  markAllRead()
  closeMenu()
}

function openAddModal() {
  showModal.value = true
  closeMenu()
}

function handleToggleViewMode() {
  toggleViewMode()
  closeMenu()
}

function handleToggleLayout() {
  toggleLayout()
  closeMenu()
}
</script>

<template>
  <header ref="headerRef" class="app-nav">
    <div class="app-nav__wrapper">
      <span class="app-nav__title">RSS Reader<span v-if="unreadCount" class="app-nav__unread"> ({{ unreadCount }})</span></span>
      <button
        class="app-nav__hamburger"
        type="button"
        :aria-expanded="menuOpen"
        aria-controls="app-nav-menu"
        :aria-label="menuOpen ? 'Close menu' : 'Open menu'"
        @click="toggleMenu"
      >
        <span class="app-nav__hamburger-icon" aria-hidden="true">
          <span></span><span></span><span></span>
        </span>
      </button>
    </div>

    <Transition name="app-nav-menu">
      <nav
        v-if="menuOpen"
        id="app-nav-menu"
        class="app-nav__menu"
        @click.self="closeMenu"
      >
        <div class="app-nav__menu-panel">
          <RouterLink to="/feeds" class="app-nav__menu-item" @click="closeMenu">Feeds</RouterLink>
          <template v-if="onFeedsPage">
            <button class="app-nav__menu-item" type="button" @click="handleToggleViewMode">
              {{ viewMode === 'list' ? 'Article view' : 'List view' }}
            </button>
            <button v-if="viewMode === 'list'" class="app-nav__menu-item" type="button" @click="handleToggleLayout">
              {{ layout === 'list' ? 'Card layout' : 'List layout' }}
            </button>
            <button class="app-nav__menu-item" type="button" @click="handleMarkAllRead">Mark all as read</button>
          </template>
          <button class="app-nav__menu-item" type="button" @click="handleSync">Sync</button>
          <button class="app-nav__menu-item" type="button" @click="openAddModal">Add RSS</button>
          <RouterLink to="/admin" class="app-nav__menu-item" @click="closeMenu">Admin</RouterLink>
          <button class="app-nav__menu-item app-nav__logout" type="button" @click="logout">Logout</button>
        </div>
      </nav>
    </Transition>

    <Teleport to="body">
      <Modal :show="showModal" @close="showModal = false">
        <template #header>
          <h3>Add RSS Feed</h3>
        </template>
      </Modal>
    </Teleport>
  </header>
</template>

<style scoped>
.app-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  background: var(--color-background);
}

.app-nav__wrapper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
}

.app-nav__title {
  font-weight: bold;
  font-size: clamp(1.1rem, 4vw, 1.4rem);
}

.app-nav__unread {
  font-weight: normal;
  opacity: 0.6;
}

.app-nav__hamburger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
}

.app-nav__hamburger-icon {
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
  width: 22px;
  height: 16px;
}

.app-nav__hamburger-icon span {
  display: block;
  height: 2px;
  border-radius: 1px;
  background: var(--color-text);
}

.app-nav__menu {
  position: absolute;
  inset: 100% 0 auto 0;
  z-index: 30;
  display: flex;
  justify-content: flex-end;
  padding: 0 1rem 1rem;
}

.app-nav__menu-panel {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: clamp(220px, 60vw, 280px);
  padding: 0.75rem;
  background: var(--color-background-soft);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.app-nav__menu-item {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: transparent;
  color: var(--color-text);
  text-decoration: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.app-nav__menu-item:hover {
  border-color: var(--color-border-hover);
}

.app-nav__menu-item.router-link-exact-active {
  font-weight: bold;
}

.app-nav-menu-enter-active,
.app-nav-menu-leave-active {
  transition: opacity 0.2s ease;
}

.app-nav-menu-enter-from,
.app-nav-menu-leave-to {
  opacity: 0;
}

@media (min-width: 768px) {
  .app-nav__wrapper {
    padding: 1rem 2rem;
  }
}
</style>