Refactor: Add useActiveUrl composable

[JaavierR]

Hi!

I ran into a couple of navigation issues while working with persistent layouts and thought I'd fix them up. Also noticed the active URL checks between the header and sidebar layouts weren't consistent, so this cleans that up too.

Issues Fixed

Navigation state not updating with persistent layouts

When using persistent layouts, the sidebar navigation doesn't react to page changes - it remains stuck showing the previous active state.

Active state lost when URL contains query parameters

Navigation links lose their active state when the URL includes query parameters, even though the route is still active.

Inconsistent active URL checks

The header and sidebar layouts were checking active URLs differently. AppHeader.vue was using a computed function to check active state, while NavMain.vue was using the urlIsActive function directly.

vue-starter-kit/resources/js/components/AppHeader.vue

Lines 51 to 54 in 4317f62

	const isCurrentRoute = computed(
	() => (url: NonNullable<InertiaLinkProps['href']>) =>
	urlIsActive(url, page.url),
	);

vue-starter-kit/resources/js/components/NavMain.vue

Lines 25 to 29 in 4317f62

	<SidebarMenuButton
	as-child
	:is-active="urlIsActive(item.href, page.url)"
	:tooltip="item.title"
	>

Changes

• Add useActiveUrl composable in resources/js/composables/useActiveUrl.ts for centralized navigation state management
• Use reactive usePage().url to ensure navigation updates with Inertia page changes
• Compare pathname only (ignoring query params) for active state detection
• Update AppHeader.vue, NavFooter.vue, NavMain.vue, and Layout.vue to use the new composable
• Remove duplicate navigation logic from lib/utils.ts

The urlIsActive function checks against the current page by default, but can be overridden by passing a custom URL as a second parameter.

Future Enhancements

I also built a version with different matching modes (startsWith, includes, etc.) but kept this PR simple. Happy to open a follow-up PR if that would be useful!