How to maintain navbar state (full width vs. minimized) on reload without layout shift

Danny

1 month ago

I'm creating my application as a multi-page app with sidebar navigation. I'm building the navigation to have a full width state and minimized state, where just the icons show. I'm keeping this state in local storage. The trouble is when navigating from one page to another as a multi-page app I can see some flickering and sometimes the navigation jumping from full width to minimized, since it only reads local storage client-side.

Is there a way to solve this as a MPA or does think kind of interaction necessitate building as an SPA?

@Andreas Møller I know you're passionate about MPA, so curious if you have a good solution.
Andreas Møller

1 month ago

You would have to set that state in a cookie instead. We don’t have a built in action for setting cookies yet. So it would have to be a custom action
Danny

1 month ago

Do the custom actions only run client side as well?
@Danny
Do the custom actions only run client side as well?
Lucas G

1 month ago

Yes, all custom code currently runs client-side.
Danny

1 month ago

Thanks! So wouldn’t using a custom action have the same flashing issue as local storage?
Lucas G

1 month ago

The custom action would be to set the cookie
Different from reading from local storage client-side
Danny

1 month ago

I’ll give that a shot
Danny

1 month ago

This worked great. Thank you both!