Mitgliederverwaltung/.plans/done/issue-124-nav-sidebar-fix.md

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)