I've been searching for quite long and I haven't found a solution yet.
I have a restaurant (menu/foods) CRUD app, where the "foods" section in the menu is the most important one. Inside the "foods" page I have a sidebar menu that contains: "menus" and "categories", where you can switch between different menus and categories.
I'm using the same page to display the different menus/categories due it will be client side loaded/cached, so I'm using url params to differentiate which data I should fetch.
Once a category or menu item is clicked in the sidebar, the url params are updated like: ?menu=foo&cat=bar, at the main page level I'm trying to detect those changes but I'm not able to. I understand that the $page.url.searchParams is a readable store, so using $: cat = $page.url.searchParams.get("cat") is not reactive.
Btw I'm using goto for updating the params into the url. I need to make those changes visible when the user is navigating using the browser arrow buttons, in that way I can display the right data for that specific menu and category.
After read a lot of comments on google, I haven't been able to find the most accurate solution for this.
I'm aware of the onNavigate, afterNavigate life cycle functions. I'm wondering whether is that one the right path or not.
I'm using sveltekit 2.
Any help?
Thanks.