From 22cf6c749816bcb9b964ca515702fb64626059d0 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Thu, 16 Jul 2026 01:03:58 +0000
Subject: [PATCH 1/2] Initial plan


From dbf52164ca54576b55187c34892146590605f806 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Thu, 16 Jul 2026 01:06:10 +0000
Subject: [PATCH 2/2] fix: apply mobile nav changes and fix PR #9 review issues
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add PRIME_TO_CINDOR_ICON map to AppIcon.vue with pi-bars → menu entry
- Add dynamic aria-label to mobile nav toggle button reflecting open/closed state
- Apply full mobile navigation improvements from PR #9"
---
 frontend/src/components/AppIcon.vue |  34 +++-
 frontend/src/components/NavBar.vue  | 234 +++++++++++++++++++++++-----
 2 files changed, 231 insertions(+), 37 deletions(-)

diff --git a/frontend/src/components/AppIcon.vue b/frontend/src/components/AppIcon.vue
index e530855..db218ca 100644
--- a/frontend/src/components/AppIcon.vue
+++ b/frontend/src/components/AppIcon.vue
@@ -1,7 +1,8 @@
 <script setup>
+import { computed } from 'vue'
 import { CindorIcon } from 'cindor-ui-vue'
 
-defineProps({
+const props = defineProps({
   label: {
     type: String,
     default: '',
@@ -19,12 +20,41 @@ defineProps({
     default: 2,
   },
 })
+
+const PRIME_TO_CINDOR_ICON = {
+  'pi-home': 'home',
+  'pi-cog': 'settings',
+  'pi-clock': 'clock',
+  'pi-stopwatch': 'clock-3',
+  'pi-video': 'video',
+  'pi-search': 'search',
+  'pi-list': 'list',
+  'pi-arrow-right': 'arrow-right',
+  'pi-play-circle': 'circle-play',
+  'pi-database': 'database',
+  'pi-th-large': 'layout-grid',
+  'pi-sync': 'refresh-cw',
+  'pi-sliders-h': 'sliders-horizontal',
+  'pi-check': 'check',
+  'pi-check-circle': 'circle-check',
+  'pi-play': 'play',
+  'pi-refresh': 'refresh-cw',
+  'pi-bars': 'menu',
+  'pi-times': 'x',
+  'pi-exclamation-circle': 'triangle-alert',
+  'pi-exclamation-triangle': 'triangle-alert',
+  'pi-question-circle': 'circle-help',
+  'pi-eye': 'eye',
+  'pi-external-link': 'external-link',
+}
+
+const resolvedName = computed(() => PRIME_TO_CINDOR_ICON[props.name] || props.name)
 </script>
 
 <template>
   <CindorIcon
     :label="label || undefined"
-    :name="name"
+    :name="resolvedName"
     :size="size"
     :stroke-width="strokeWidth"
     aria-hidden="true"
diff --git a/frontend/src/components/NavBar.vue b/frontend/src/components/NavBar.vue
index b43f862..75bfba5 100644
--- a/frontend/src/components/NavBar.vue
+++ b/frontend/src/components/NavBar.vue
@@ -1,55 +1,118 @@
 <script setup>
+import { computed, ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
 import AppIcon from './AppIcon.vue'
 
 const navGroups = [
   {
     label: 'Workspace',
     items: [
-      { to: '/', icon: 'home', label: 'Dashboard' },
-      { to: '/settings', icon: 'settings', label: 'Settings' },
+      { to: '/', icon: 'pi-home', label: 'Dashboard' },
+      { to: '/settings', icon: 'pi-cog', label: 'Settings' },
     ],
   },
   {
     label: 'Diagnostics',
     items: [
-      { to: '/movies/duration', icon: 'clock', label: 'Movie duration' },
-      { to: '/movies/quality', icon: 'video', label: 'Video quality' },
-      { to: '/coverage', icon: 'search', label: 'Unmanaged movies' },
-      { to: '/sonarr/duration', icon: 'clock', label: 'Episode duration' },
-      { to: '/sonarr/monitoring', icon: 'list', label: 'Unmonitored episodes' },
+      { to: '/movies/duration', icon: 'pi-clock', label: 'Movie duration' },
+      { to: '/movies/quality', icon: 'pi-video', label: 'Video quality' },
+      { to: '/coverage', icon: 'pi-search', label: 'Unmanaged movies' },
+      { to: '/sonarr/duration', icon: 'pi-clock', label: 'Episode duration' },
+      { to: '/sonarr/monitoring', icon: 'pi-list', label: 'Unmonitored episodes' },
     ],
   },
 ]
+
+const route = useRoute()
+const mobileMenuOpen = ref(false)
+
+const allItems = computed(() => navGroups.flatMap((group) => group.items))
+
+watch(
+  () => route.fullPath,
+  () => {
+    mobileMenuOpen.value = false
+  },
+)
 </script>
 
 <template>
-  <aside class="app-nav">
-    <router-link to="/" class="app-nav__brand">
-      <span class="app-nav__mark">PI</span>
-      <strong class="app-nav__brand-title">Plex Issue Finder</strong>
-    </router-link>
-
-    <div class="app-nav__groups">
-      <section v-for="group in navGroups" :key="group.label" class="app-nav__group">
-        <h2 class="app-nav__label">{{ group.label }}</h2>
-        <nav class="app-nav__items">
-          <router-link
-            v-for="item in group.items"
-            :key="item.to"
-            :to="item.to"
-            class="app-nav__item"
-            exact-active-class="app-nav__item--active"
-          >
-            <AppIcon :name="item.icon" :size="18" />
-            <span class="app-nav__item-label">{{ item.label }}</span>
-          </router-link>
-        </nav>
-      </section>
-    </div>
-  </aside>
+  <div class="app-nav-shell">
+    <header class="app-nav-mobile-bar">
+      <router-link to="/" class="app-nav__brand">
+        <span class="app-nav__mark">PI</span>
+        <strong class="app-nav__brand-title">Plex Issue Finder</strong>
+      </router-link>
+
+      <button
+        type="button"
+        class="app-nav-mobile-toggle"
+        :aria-expanded="mobileMenuOpen ? 'true' : 'false'"
+        aria-controls="app-mobile-nav-drawer"
+        :aria-label="mobileMenuOpen ? 'Close navigation menu' : 'Open navigation menu'"
+        @click="mobileMenuOpen = !mobileMenuOpen"
+      >
+        <AppIcon :name="mobileMenuOpen ? 'pi-times' : 'pi-bars'" :size="18" />
+      </button>
+    </header>
+
+    <button
+      v-if="mobileMenuOpen"
+      type="button"
+      class="app-nav__backdrop"
+      aria-label="Close navigation menu"
+      @click="mobileMenuOpen = false"
+    />
+
+    <aside
+      id="app-mobile-nav-drawer"
+      class="app-nav"
+      :class="{ 'app-nav--mobile-open': mobileMenuOpen }"
+    >
+      <router-link to="/" class="app-nav__brand app-nav__brand--desktop">
+        <span class="app-nav__mark">PI</span>
+        <strong class="app-nav__brand-title">Plex Issue Finder</strong>
+      </router-link>
+
+      <nav class="app-nav-mobile-tabs" aria-label="Primary navigation">
+        <router-link
+          v-for="item in allItems"
+          :key="item.to"
+          :to="item.to"
+          class="app-nav-mobile-tab"
+          exact-active-class="app-nav-mobile-tab--active"
+        >
+          <AppIcon :name="item.icon" :size="16" />
+          <span>{{ item.label }}</span>
+        </router-link>
+      </nav>
+
+      <div class="app-nav__groups">
+        <section v-for="group in navGroups" :key="group.label" class="app-nav__group">
+          <h2 class="app-nav__label">{{ group.label }}</h2>
+          <nav class="app-nav__items">
+            <router-link
+              v-for="item in group.items"
+              :key="item.to"
+              :to="item.to"
+              class="app-nav__item"
+              exact-active-class="app-nav__item--active"
+            >
+              <AppIcon :name="item.icon" :size="18" />
+              <span class="app-nav__item-label">{{ item.label }}</span>
+            </router-link>
+          </nav>
+        </section>
+      </div>
+    </aside>
+  </div>
 </template>
 
 <style scoped>
+.app-nav-shell {
+  display: contents;
+}
+
 .app-nav {
   width: 248px;
   display: flex;
@@ -57,6 +120,14 @@ const navGroups = [
   flex-shrink: 0;
   background: var(--bg-subtle);
   border-right: 1px solid var(--border);
+  position: relative;
+  z-index: 20;
+}
+
+.app-nav-mobile-bar,
+.app-nav-mobile-tabs,
+.app-nav__backdrop {
+  display: none;
 }
 
 .app-nav__brand {
@@ -92,6 +163,10 @@ const navGroups = [
   font-weight: var(--weight-semibold);
 }
 
+.app-nav__brand--desktop {
+  display: flex;
+}
+
 .app-nav__groups {
   flex: 1;
   overflow: auto;
@@ -163,15 +238,104 @@ const navGroups = [
 }
 
 @media (max-width: 960px) {
+  .app-nav-mobile-bar {
+    min-height: 64px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-3);
+    padding: 0 var(--space-4);
+    border-bottom: 1px solid var(--border);
+    background: color-mix(in srgb, var(--bg-subtle) 94%, transparent);
+    backdrop-filter: blur(12px);
+    position: sticky;
+    top: 0;
+    z-index: 30;
+  }
+
+  .app-nav__brand--desktop {
+    display: none;
+  }
+
+  .app-nav-mobile-toggle {
+    width: 40px;
+    height: 40px;
+    border: 1px solid var(--border);
+    border-radius: var(--radius-md);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--surface);
+    color: var(--fg);
+    box-shadow: var(--shadow-sm);
+  }
+
+  .app-nav__backdrop {
+    display: block;
+    position: fixed;
+    inset: 64px 0 0;
+    background: color-mix(in srgb, var(--bg) 66%, transparent);
+    border: 0;
+    padding: 0;
+    z-index: 18;
+  }
+
   .app-nav {
-    width: 100%;
-    border-right: 0;
+    width: min(320px, calc(100vw - 24px));
+    max-width: 100%;
+    height: calc(100vh - 76px);
+    position: fixed;
+    top: 72px;
+    left: 12px;
+    border: 1px solid var(--border);
+    border-radius: var(--radius-xl);
+    box-shadow: var(--shadow-lg);
+    transform: translateY(-8px) scale(0.98);
+    opacity: 0;
+    pointer-events: none;
+    transition:
+      transform var(--duration-fast) var(--ease-out),
+      opacity var(--duration-fast) var(--ease-out);
+    overflow: hidden;
+  }
+
+  .app-nav--mobile-open {
+    transform: translateY(0) scale(1);
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  .app-nav-mobile-tabs {
+    display: flex;
+    gap: var(--space-2);
+    overflow-x: auto;
+    padding: var(--space-3) var(--space-3) 0;
     border-bottom: 1px solid var(--border);
+    background: color-mix(in srgb, var(--surface) 90%, transparent);
+  }
+
+  .app-nav-mobile-tab {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-2);
+    min-height: 36px;
+    padding: 0 var(--space-3);
+    border: 1px solid var(--border);
+    border-radius: 999px;
+    white-space: nowrap;
+    color: var(--fg-muted);
+    background: var(--surface);
+  }
+
+  .app-nav-mobile-tab--active {
+    color: var(--fg);
+    border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
+    background: color-mix(in srgb, var(--accent) 12%, var(--surface));
   }
 
   .app-nav__groups {
-    overflow: visible;
-    padding-bottom: var(--space-2);
+    overflow: auto;
+    padding-bottom: var(--space-4);
   }
 }
 </style>