The LiveView, and particularly the sticky LV, is the abstraction for compartmentalizing state (and events).
If you want to keep the state on the server, then sticky LV is a good option, I had a positive experience implementing a similar navigation component after making a similar question myself.

The phx-update="ignore" and local/session storage direction is if you prefer to keep the state in the browser only.

Both options are viable. State on the server opens up some creative possibilities, like syncing the state across tabs, easily “studying” how users use the UI, remote-controlling the UI, conditional events based on UI state, etc.

Thanks for the input, seems like I should take another look at the sticky liveview

Coming back to this, I wanted to share that there are other options worth exploring that don’t involve a separate (sticky) LiveView.

For instance, one can save the open/close state on the client using localStorage and then pass it as params to the LiveSocket, see the example in the docs at Phoenix.LiveView.get_connect_params/1.

For a collection of this and other techniques, there’s a talk from ElixirConf EU 2025: Phoenix LiveView: Mastering Reconnects for a Seamless User Experience -Giovanni Francischelli.