Persisting a sidebars expanded / collapsed state with React and Local Storage

What are we building?

Today we will be building a sidebar (side navigation bar) that can expand to show icons + text, and that can collapse to show only the icons. And when you refresh the page, the state of the sidebar will be persisted. Or in other words if you collapse the sidebar and refresh the page it will still be collapsed and not expanded.

Let’s get started!

First things first, let’s set up our react app:

cd into sidebar-demo and open it up in your go-to text editor.

Now inside of our src folder let’s go ahead and create a components folder where we’ll be keeping our sidebar component.

Inside our components folder lets create a Sidebar.js file and a Sidebar.css file.

Inside our Sidebar.js file we will place the following code:

And inside our Sidebar.css file:

And let’s go ahead and replace the code inside of our App.js file with the following code:

Go ahead and run err in the browser npm start and we have the following:

Now isn’t that perrrty? Of course it is! But let’s do a little better, let’s add icons and text to our sidebar.

Let’s add the react-icons package npm install react-icons — save

Inside our Sidebar.js file replace it’s contents with the following code:

And inside our Sidebar.css file add the following styles:

And if we take a look back in our browser we have this:

Now that is what I’m talking about! So far so good, except right now the menu toggler icon does not work yet. So let’s go ahead and sprinkle in some onClick handlers, useState hooks and a bit of localStorage to spice it up a bit more!

Back in our Sidebar.js file let’s setup our useState hook and connect it with some localStorage ‘logic’:

So what exactly are we doing here? We are making use of localStorage and getting the item ‘sidebar-collapsed’ from localStorage. Then we set the state of our isExpanded to true or false depending if the ‘sidebar-collapsed’ item is in fact inside of localStorage. If that item IS inside of localStorage then we set isExpanded to false, else we set it to true.

Initially we will have an expanded sidebar always, until we click on the menu toggler, which at that point will set the ‘sidebar-collapsed’ item inside of localStorage and persist the state of our sidebar as collapsed.

Let’s go ahead and handle the onClick event for our menu toggler, inside of our Sidebar.js file, find the following line of code:

and replace it with:

And right before our return statement inside of our Sidebar component add the following handler function:

When we hit the if statement we are seeing if the sidebar is currently expanded when our menu toggler was clicked and if it is expanded then what we wanna do is collapse it. In order to collapse it we setIsExpanded to false and we also want to add a ‘sidebar-collapsed’ item to localStorage that has a value of true in order to persist the state of the sidebar as we mentioned above. And the code outside of the if statement only runs if our if statement fails or in other words if the sidebar was already collapsed when our menu toggler was clicked. And if it was already collapsed, in order to expand it again we setIsExpanded to true and we also remove the ‘sidebar-collapsed’ item from localStorage.

We now have all the ‘logic’ for us to expand and collapse the sidebar, now we just need to see it in action. So let’s add our final lines of code!

Inside of Sidebar.js, replace the following line of code:

with:

Also add the following styles to Sidebar.css:

And boom! We should now have something that looks like this:

If you want to look at what’s going on with localStorage open up developer tools and click on the Application tab. Then expand Local Storage on the left hand side and click on http://localhost:3000 . Once you have that open, click on the menu toggler on the sidebar and watch what happens inside of the Local Storage ‘Key / Value’ boxes. As you can see when you click the menu toggler while it is expanded, it will add the item ‘sidebar-collapsed’ with a value of true, and if you refresh, the item is still inside of Local Storage! And when you expand the sidebar, the item is removed from Local Storage. This is exactly what we set it up to do inside of our handler function in Sidebar.js!

Thank you for following along and have a good one!

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store