Open
fix: resolve pi-bars icon mapping and dynamic aria-label in mobile nav#13
Conversation
- 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"
Copilot
AI
changed the title
[WIP] Fix code based on review comments
fix: resolve pi-bars icon mapping and dynamic aria-label in mobile nav
Jul 16, 2026
cbulock
marked this pull request as ready for review
July 16, 2026 01:29
Contributor
There was a problem hiding this comment.
Pull request overview
Fixes regressions in the mobile navigation introduced by PR #9 by ensuring PrimeIcons names resolve correctly in AppIcon (including pi-bars for the hamburger icon) and by making the mobile nav toggle button’s aria-label reflect the current open/closed state.
Changes:
- Added a PrimeIcons → Lucide name translation layer in
AppIcon.vueand included a missingpi-barsmapping. - Updated
NavBar.vueto use PrimeIcons names for navigation items and improved mobile nav behavior (drawer, backdrop, auto-close on route change) with a dynamic togglearia-label.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| frontend/src/components/NavBar.vue | Updates mobile navigation structure/behavior and switches nav item icons to PrimeIcons names. |
| frontend/src/components/AppIcon.vue | Adds PrimeIcons-to-Cindor/Lucide name resolution so Prime icon names render correctly. |
Comment on lines
56
to
59
| :label="label || undefined" | ||
| :name="name" | ||
| :name="resolvedName" | ||
| :size="size" | ||
| :stroke-width="strokeWidth" |
Comment on lines
+293
to
+306
| 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; | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Two bugs in the mobile navigation introduced by PR #9:
pi-barswas missing from thePRIME_TO_CINDOR_ICONlookup, causing the hamburger icon to fail silently, and the toggle button'saria-labelwas hardcoded to "Open navigation menu" regardless of drawer state.Changes
AppIcon.vuePRIME_TO_CINDOR_ICONmap to translate Prime icon names → Lucide names before passing toCindorIcon'pi-bars': 'menu'entry; without it, the raw stringpi-barswas forwarded toCindorIconwhich doesn't recognize Prime namingNavBar.vuearia-labelon toggle button to reflect actual state: