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:

npx create-react-app sidebar-demo

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

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

Inside our components folder lets create a file and a file.

Inside our file we will place the following code:

And inside our file:

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

Go ahead and run err in the browser 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

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

And inside our 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 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 file, find the following line of code:

<RiMenuLine className="sidebar-icon" />

and replace it with:

<RiMenuLine
className="sidebar-icon"
onClick={handleToggler}
/>

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 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 , replace the following line of code:

<div className="Sidebar">
//...
</div>

with:

<div className={isExpanded ? "Sidebar" : "Sidebar collapsed">
//...
</div>

Also add the following styles to :

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 . 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