shahondin1624
56 lines
2.6 KiB
Markdown
56 lines
2.6 KiB
Markdown
# Issue #124: Nav sidebar clicks don't navigate between views
|
|
|
|
## Summary
|
|
|
|
The `NcAppNavigationItem` components in `App.vue` use `@click` handlers to call `router.push()`,
|
|
but the component internally renders an `<a href="#">` that intercepts the click event, navigating
|
|
to `#` (root hash) before the Vue click handler fires. The fix is to use `NcAppNavigationItem`'s
|
|
built-in `:to` prop which renders the element as a `<router-link>`, handling navigation natively.
|
|
|
|
## Plan
|
|
|
|
### Step 1: Modify `src/App.vue` navigation items
|
|
|
|
For each `NcAppNavigationItem`:
|
|
1. Replace `@click="navigate('routeName')"` with `:to="{ name: 'routeName' }"`
|
|
2. Remove the `:active` binding since `NcAppNavigationItem` auto-detects active state from `:to`
|
|
3. Keep icon template slots unchanged
|
|
|
|
### Step 2: Remove the `navigate()` function and `useRouter` import
|
|
|
|
Since navigation is now handled by the `:to` prop:
|
|
- Remove `const router = useRouter()`
|
|
- Remove the `navigate()` function
|
|
- Remove `useRouter` from the import (keep `useRoute` since `currentRoute` still needs it)
|
|
|
|
### Step 3: Keep `currentRoute` if needed, OR remove
|
|
|
|
Actually, with `:to` prop, `NcAppNavigationItem` automatically sets active state. But for routes
|
|
like `member-detail` that should highlight "Mitglieder", we need the `:active` prop for parent
|
|
route matching. The `:to` prop only auto-activates on exact route match.
|
|
|
|
**Decision**: Keep `:active` bindings for nav items that have sub-routes (Mitglieder, Familien, Lager)
|
|
to handle parent-route highlighting. For items with no sub-routes (Beiträge, Berichte, Audit-Log,
|
|
Einstellungen), `:to` auto-active is sufficient — but for consistency, keep all `:active` bindings.
|
|
|
|
Actually, let me reconsider: the `:to` prop with vue-router uses `router-link-active` class which
|
|
matches prefix. So `/members/5` would still match `{ name: 'members' }` route... but only if
|
|
the path matches. Since named routes have exact paths, it depends on `router-link` behavior.
|
|
|
|
**Safest approach**: Keep `:active` bindings for items with child routes, remove them for simple routes.
|
|
No -- for consistency and zero regression risk, keep ALL `:active` bindings.
|
|
|
|
### Step 4: Verify build compiles
|
|
|
|
Run `npm run build` to ensure no errors.
|
|
|
|
## Acceptance Criteria Checklist
|
|
|
|
1. [ ] Each `NcAppNavigationItem` uses `:to` prop with the correct route object
|
|
2. [ ] No `@click="navigate(...)"` handlers remain on navigation items
|
|
3. [ ] The `navigate()` function is removed
|
|
4. [ ] The `useRouter` import is removed (no longer needed)
|
|
5. [ ] `:active` bindings are preserved for parent-route highlighting
|
|
6. [ ] Build succeeds without errors
|
|
7. [ ] All existing routes still work (no route names changed)
|