Fix stale sidebar open state when using prefetch links

When using Inertia prefetch links, the sidebar open state for that page is cached for 30 seconds (default) when hovering over a link. This can lead to unexpected behavior of the sidebar reopening or reclosing when navigating to the cached page. The router cache should be cleared whenever the sidebar state changes to clear out a potential stale sidebar open state.

Reproduction:
1. Your app has 2 pages: Dashboard and Page 2. The prefetch attribute should be on both Inertia links in the sidebar.
2. Navigate to Page 2 with sidebar open.
3. Hover over (but don't click) the Dashboard link to prefetch it and then close the sidebar.
4. Now click on the Dashboard link to navigate to the cached page. The sidebar will now be open because that was the state the sidebar was in when prefetched.

The Vue starter kit is not using prefetch links so it doesn't have this problem. If it is updated to use prefetch links, this fix will need added to it as well.

Author: daleweaver777

resources/js/components/app-sidebar-header.tsx

@@ -6,7 +6,7 @@ export function AppSidebarHeader({ breadcrumbs = [] }: { breadcrumbs?: Breadcrum
     return (
         <header className="border-sidebar-border/50 flex h-16 shrink-0 items-center gap-2 border-b px-6 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12 md:px-4">
             <div className="flex items-center gap-2">
-                <SidebarTrigger className="-ml-1" />
+                <SidebarTrigger className="-ml-1" onClick={()=>router.flushAll()} />
                 <Breadcrumbs breadcrumbs={breadcrumbs} />
             </div>
         </header>