hamburger menu, article view

vue/src/components/AppNav.vue

@@ -1,28 +1,88 @@
 <script setup>
+import { ref } from 'vue'
 import { RouterLink, useRouter } from 'vue-router'
+import { useFeeds } from '@/composables/useFeeds'
 
 const router = useRouter()
+const { sync, showModal, viewMode, toggleViewMode } = useFeeds()
+
+const menuOpen = ref(false)
+
+function toggleMenu() {
+  menuOpen.value = !menuOpen.value
+}
+
+function closeMenu() {
+  menuOpen.value = false
+}
 
 function logout() {
   localStorage.removeItem('user-token')
   localStorage.removeItem('user-id')
+  closeMenu()
   router.push({ name: 'login' })
 }
+
+function handleSync() {
+  sync()
+  closeMenu()
+}
+
+function openAddModal() {
+  showModal.value = true
+  closeMenu()
+}
+
+function handleToggleViewMode() {
+  toggleViewMode()
+  closeMenu()
+}
 </script>
 
 <template>
   <header class="app-nav">
     <div class="app-nav__wrapper">
       <span class="app-nav__title">RSS Reader</span>
-      <nav class="app-nav__links">
-        <RouterLink to="/feeds">Feeds</RouterLink>
-        <button class="app-nav__logout" @click="logout">Logout</button>
-      </nav>
+      <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>
+          <button class="app-nav__menu-item" type="button" @click="handleToggleViewMode">
+            {{ viewMode === 'list' ? 'Article view' : 'List view' }}
+          </button>
+          <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>
+          <button class="app-nav__menu-item app-nav__logout" type="button" @click="logout">Logout</button>
+        </div>
+      </nav>
+    </Transition>
   </header>
 </template>
 
 <style scoped>
+.app-nav {
+  position: relative;
+}
+
 .app-nav__wrapper {
   display: flex;
   flex-wrap: wrap;
@@ -37,35 +97,88 @@ function logout() {
   font-size: clamp(1.1rem, 4vw, 1.4rem);
 }
 
-.app-nav__links {
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-}
-
-.app-nav__links a {
-  padding: 0.5rem 0.75rem;
-  min-height: 44px;
+.app-nav__hamburger {
   display: inline-flex;
   align-items: center;
-  text-decoration: none;
-  color: var(--color-text);
+  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__links a.router-link-exact-active {
-  font-weight: bold;
+.app-nav__hamburger-icon {
+  display: inline-flex;
+  flex-direction: column;
+  justify-content: space-between;
+  width: 22px;
+  height: 16px;
 }
 
-.app-nav__logout {
+.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;