Skip to content

fix: resolve pi-bars icon mapping and dynamic aria-label in mobile nav #13

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Copilot wants to merge 2 commits into
base: main
Choose a base branch
from
Open

fix: resolve pi-bars icon mapping and dynamic aria-label in mobile nav #13

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
22cf6c7
Initial plan
Copilot Jul 16, 2026
dbf5216
fix: apply mobile nav changes and fix PR #9 review issues
Copilot Jul 16, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 32 additions & 2 deletions frontend/src/components/AppIcon.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
<script setup>
import { computed } from 'vue'
import { CindorIcon } from 'cindor-ui-vue'

defineProps({
const props = defineProps({
label: {
type: String,
default: '',
Expand All @@ -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"
Comment on lines 56 to 59
aria-hidden="true"
Expand Down
234 changes: 199 additions & 35 deletions frontend/src/components/NavBar.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,62 +1,133 @@
<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;
flex-direction: column;
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 {
Expand Down Expand Up @@ -92,6 +163,10 @@ const navGroups = [
font-weight: var(--weight-semibold);
}

.app-nav__brand--desktop {
display: flex;
}

.app-nav__groups {
flex: 1;
overflow: auto;
Expand Down Expand Up @@ -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;
}
Comment on lines +293 to +306

.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>