Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

Sturm's avatar
Level 5

Saving the opened/closed status of a sidebar

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.

0 likes
4 replies
jlrdw's avatar

I usually alternate between a display:none and a display:block for this type of thing. I use jquery for that. I have a div as an example that is defaulted to the display:none.

Cronix's avatar

You could use either option (session/cookie). Cookie would be easier bc you can read/write to a cookie using js to update the state. If you were using session, you'd have to send an ajax call whenever the person opened/closed it to record it's state in session, which would then be available on future requests.

I've used the cookie method to do something similar, except I was using it to store search parameters for a form, so that if they go back to the search page the parameters default to the previous ones used.

1 like
Sturm's avatar
Sturm
OP
Best Answer
Level 5

Thanks for the fast replies, @jlrdw and @Cronix! As it turns out, I probably shouldn't be using PHP for this task, after all. Since there's already a handler for this event in the admin template's JavaScript file, I figured I would just take advantage of that and use a JavaScript cookie. So I set about adding the JS-Cookie library to handle it.

However, after investigating the function that handles the sidebar toggler, I see that this admin template author has already been using the JS-Cookie library and, indeed, storing the sidebar state with each click. He even had code for retrieving that cookie and adding the appropriate class to the <body> tag; it was just commented-out. So I uncommented it and it seems to work, just with a delay. That is, the page then loads with the sidebar open for a second, then it collapses, presumably once it reaches that point in the code.

I think I’ll be okay with the delay, though. I don’t know what else to do about it, but it probably won't be a huge deal. Thanks again!

mhankins's avatar

@Sturm Js-Cookie is surely the way to go here. I've encountered the delay you speak of and my solution was to alway start at a presumed closed state instead of open.

1 like

Please or to participate in this conversation.