Retaining state of collapsed side nav

nealbo · 2024-12-10T11:10:32.614Z

So I’ve been easily able to get my side nav to collapse:

Side nav is a floating group, 175px
Main content has 175px left margin

On click, I can store a flag in User Thing (collapsed = yes).

I’ve set a condition on both of the above that when flag is yes, width (and margin) changed to 75px, assigned a transition to both and it works nicely.

Where my logic fails me is when a user navigates to a new page. Of course the page is loaded with the original 175px width and margin. If the flag is yes, the transition will start again.

Obviously this isn’t my intention. I need it so that when that collapsed flag is already active, that the nav is already collapsed (no transition) when a user moves to a new page.

Does anyone have experience of this, or can help me logically figure out how to implement?

ihsanzainal84 · 2024-12-10T11:46:36.609Z

This kind of UX depends on how you set your page up on default.

For something like this what I would do is I would set the default UI to a collapsed state instead.

nealbo · 2024-12-10T11:58:01.227Z

Yeah I’ve thought about that, but if a user has a flag that “collapsed” is “no”, I have the same issue - transition to uncollapse triggers on every page load.

Really what I’m looking for here, is for it to retain the users choice as they navigate. The only time the animation should trigger is when they manually click to collapse or uncollapse. But I can’t see a way to detach the manual event vs the stored event/state as both will trigger the transition.

ihsanzainal84 · 2024-12-10T12:18:42.119Z

You could just hide the transition behind a loader. That’s what I usually do.

nealbo · 2024-12-10T13:34:08.659Z

Thanks for the suggestion - I’m not a fan of loaders unfortunately. I think I’m going to just have to drop the feature as I can’t see a clear way to achieve it

system · 2025-02-18T11:11:22.739Z

This topic was automatically closed after 70 days. New replies are no longer allowed.