Sidebars are a very important piece when building a Webapp, especially for a Dashboard.
It enables your users to navigate easily and efficiently through your app, while still being a nice piece of design (when done right).
In this article, we are going to see how you can make a Sidebar collapse in Bubble in just a few steps, without any plugins.
To keep going further in Bubble, you can also read our article on how to make angled sections divider in Bubble.
Step 1 : Building your Sidebar in Bubble
The first step is of course to design your Sidebar.
Make it nice and neat and most of all, make sure it first your app's design.
To save time, I'm going to use a Sidebar from Nocodable Component's Library.
This way, I only have to Copy and Paste it into my app.
My Sidebar is contained into a group with a Column Layout that contains three other Groups (the one with the logo, the one with the tabs, and the one with the user at the bottom of the sidebar).
One important thing to note is that my sidebar has a Fixed Width. This will enable us to modify the width more easily.
For the height, I've unchecked the "Fit Height to Content" checkbox, to make sure my sidebar spreads all the way to the bottom of the page.
Once you're done with this part, we can move on to the next one and make this sidebar collapsible.
Step 2 : Creating our custom state
If we take a step back, we can see that in reality, a collapsible sidebar is simply a sidebar that changes its width based on a state (i.e if it's opened or not).
If you know your way around Bubble, you guessed that we are going to use Custom States to track this state.
So let's go ahead and create a custom state on our sidebar :
Select the group that contains your sidebar and open it's property panel
At the top of the property panel, click the "i" icon to open up the elements inspector.
From there, you can create your new custom state.
Let's do that and name it "Opened?" and set it's Type to "Yes/no".
Don't forget to set it's default value ! You can choose between Yes or No depending on if you want the sidebar to be collapsed or not when the page is loaded.
In my case, I'll set the default value to "Yes". This way the sidebar will be fully visible when the user loads the page.
Step 3 : Adding a workflow to change the state of our sidebar
Nice, now we are able to track the current state of our sidebar (i.e if the sidebar is collapsed or not).
But now, we need a way to change this state, right ?
This is pretty straightforward. If you didn't already, you'll need an icon or any other elements on which your users will be able to click to Collapse or Extend the sidebar.
In my case, I've got a Double-Chevron Icon that will do the trick.
Let's click it and add a workflow on it :
We want to this workflow to modify the current state of our sidebar.
If the sidebar is opened --> Close it
If the sidebar is closed --> Open it
To do this we'll need two workflows (on the same icon).
Let's go ahead and create the first one :
- Add an action that will set the Opened? state of our sidebar to "Yes"
- Add an condition on the workflow to make sure it's triggered only when the Sidebar's Opened? State is "No"
Now that we have our first Workflow, we can simply Copy and Paste this workflow to duplicate it (Right click on the workflow) and make the opposite work on the second workflow :
- Add an action that will set the Opened? state of our sidebar to "No"
- Add an condition on the workflow to make sure it's triggered only when the Sidebar's Opened? State is "Yes"
Nice ! Our users can now modify our Sidebar's state.
For now, it doesn't affect the sidebar, but we are going to cover that in our next step !
Step 4 : Adding conditionals to our sidebar
Now that we are able to reference the current state of our sidebar, we can modify the elements contained by our sidebar with this according to this.
With this, we will be able to change the Sidebar's width, show or hide some child elements etc etc...
This is the most "tedious" part of this tutorial. We're going to need to apply conditionals on multiple elements across the sidebar, so you need to make sure you're focused.
So let's get started with this.
For reference, here is the result we want to achieve :
Hide the elements that should be hidden when collapsed
As we can see above, there are a number of elements that need to be hidden when the sidebar is collapsed.
For instance, all the names of the tabs need to disappear and the logo at the top should change as well.
Let's start by hiding the names of our tabs
To do this, we'll need to add the following condition : When our Sidebar is closed, then this element is not visible.
Translated into Bubble, it gives us this :
Now, make sure to check the "Collapse When Hidden" option on each element you want to hide.
Now go ahead and paste this expression of every elements you want to hide, hit preview and you'll see that it's working ! (I know, the sidebar is not collapsing yet, but we'll come to it).
Change our Sidebar's width when collapsed
Now comes the important part : changing our sidebar's width.
To do this, we'll use the same approach than before : we'll use conditions
The condition we need is : When our sidebar's opened is "No", change it's width to x PX
Translated into Bubble, it gives us this :
Now, if we check our result :
Adapt our elements layout and alignement
As we can see earlier, our elements are all over the place. Nothing is centered properly and the paddings are way too high.
To correct that, we'll use the same condition again and again to change the layout and the paddings of our elements.
Smoothing our Sidebar's Width transition
Okay, we've got a working Collapsible Sidebar. That's cool.
Now, the transition is a bit rough (because... there is not transition).
The sidebar instantly goes from it's default width to it collapsed width, which isn'y very smooth.
Let's fix that by adding some transition.
To do that simply select your sidebar, and find the dropdown that says "Select a property to define a new transition".
Select "Width" from the list and there you go !
You can hit preview and you'll see that your sidebar now has a way smoother feel than before !
You can of course play with the type of transition and the duration (I like to set the duration to 300ms).
Conclusion
There you go ! You now know how to create a collapsible sidebar in Bubble !
If you liked this article don't forget to share it, it helps us a lot.
And if you don't want to spend time creating your own components, check out our library. We've got more than 160 fully responsive, high quality components.
