In this episode, we tackle a little annoyance with our user navigation menu. Right now, when you click on a link (like "Account" or "Security"), the app takes you to the right page, but the dropdown menu stubbornly stays open. Previously, we tried closing it on mouse up, but that stopped the link from navigating properly—definitely not ideal.
So in this video, we walk through why the menu isn't closing and how Inertia.js links handle navigation as router requests. We remember how, with forms, we can hook into the onSuccess callback after a router request, and realize we can use exactly the same approach here!
By adding an onSuccess handler to the navigation links, we can tell the menu to close only after the new page has successfully loaded. We implement this change, try things out, and confirm it works as expected for both the "Account" and "Security" links. There's a quick note that logging out is handled a bit differently, but for these links, the fix is clean and reliable.
So by the end of this episode, our navigation menu behaves as users would expect—it closes itself as soon as you navigate somewhere new.