2 years ago

Saving the opened/closed status of a sidebar

Posted 2 years ago by Sturm

This seems like the kind of problem that's been solved a hundred times over, but since I'm a n00b, I need some hand-holding.

I've got a sidebar that opens/collapses when a hamburger icon in the header is clicked. This is obviously accomplished in JavaScript. However, going to another page (route) resets the sidebar back to its default--opened.

There must be some way to store the user's preference if they want the sidebar collapsed so just icons in it are showing. My immediate thought is to use a SESSION variable. If that's not a good idea, then perhaps a cookie. If that, too, is not considered a good practice, then can someone please tell me what is?

More importantly, however, is where to store the variable. I've pretty much already got the how from the Laravel docs and from many Google searches (i.e., session(['sidebar_status' => 'page-sidebar-closed']) or Cookie::make('sidebar_status', 'page-sidebar-closed'). What I cannot find nor figure out is how to have the app detect when a user clicks/taps on the hamburger icon/button, read whether or not the 'page-sidebar-closed' class already applied to the tag, then reverse that and store it somewhere (session, cookie, whatever) while also allowing the JavaScript to execute and perform the action. The stored variable can then be read back into the tag's class list as either an empty string or a the 'page-sidebar-closed' string.

I've been told there's no need to create a Controller for this, and I haven't yet gotten any answer on whether or not I need to create and Event/Listener combo. Although I doubt I should do that for just a simple thing like this. So what's the step-by-step that I'd need to for this? Again, I apologize in advance for such a simple request from a newcomer.

Please sign in or create an account to participate in this conversation.