Sidebar 3

⚠️ This documentation is shared for Sidebar 3 and Sidebar 6. Some screenshots may not be fully identical to the components you chose to use but the technics will be the same.

Introduction

Sidebars are among the most useful components of a Webapp, especially if you're building a Dashboard.

In Nocodable Component's library, we chose to build easy to maintain Sidebars, that can adapt to any Layout and most of all that automatically convert to a Mobile Menu when the screen becomes too narrow.

This makes it easy to use, as well as customize and maintain.

Adding the Sidebar 3 component to your application

In order to add the Sidebar 1 component to your project, you'll need to make sure your page is using Bubble's most recent responsive engine, and that a Type of Layout is set.

Make sure to set the "Container Layout" on your page

Once this is done, you can copy the Sidebar from Nocodable Component's extension and use the "Paste with Workflows" action in Bubble to paste it.

Here's what you should get when pasting the Sidebar 3

As you can see, this Sidebar is built using a Floating Group. This means that the Sidebar will "float" over the page. It helps to have a cleaner behavior, especially on Mobile.

Since the Sidebar is floating, your layout will most likely end up behind the Sidebar.

So to make it work correctly, you'll have to add some margin to your Dashboard content.

On desktop

In order to adapt your Layout on Desktop and make sure that it does not collide with the Sidebar, you'll simply to add a Left Margin to the group holding your Content.

As you can see in the screenshot below, I've added a 256px Left Margin to my "Group CONTENT".

Note that you might need to adapt this value following the width of your Sidebar on Desktop.

On desktop, when the Sidebar is collapsed

Now we also need to take into account that this Sidebar has the ability to collapse, and therefore take less space that when it is not collapsed.

Therefore, we need to make sure to reflect this onto our Group Content. To do this, all we need to do is adding a conditional, like follows :

On mobile

Now that our desktop version is done, we need to make sure it adapts well also on Mobile (and narrower screens in general).

By default, the Sidebar 3 (and all our Sidebars) switch to their Mobile version when the Page's width is inferior or equal to 992px.

Under this screen width, the Sidebar will transform into a Mobile menu that sticks at the top of the page and takes the screen's full width.

Here's how it looks under 992px Width

Knowing this, you probably figured that we now need to update the Left Margin we set earlier on the group holding our content, and we also need to add some top margin to this Group (in order to give enough space to our Mobile menu).

Here's how to do it :

A simple conditional will do the job

As you can see in the screenshot above, I've simply added a conditional that modifies the Left Margin and the Top Margin under a certain screen width (992px in this particular case).

With this done, the Sidebar has been correctly integrated into your app, well done !

Customizing the styles

Now comes the fun part : customizing the look of this Sidebar.

Changing Tab's colors

Now you might want to change the Tab's hover and selection color. In order to do this simply select a Tab, go to conditionals and change the color :

Repeat for the other tabs (or duplicate the first one) and you're all set.

Pro tip : For the Label and the Icon, remember to add a Style. This way you'll be able to modify all of them from the Styles tab.

For the background of the Sidebar, you can simply select the Floating Group and modify it's color.

Adding more Tabs

If you want to add more Tabs to your Sidebar, you can simply duplicate any of the existing Tabs (using CMD + D on Mac or Ctrl + D on Windows).

Once it's duplicated, simply modify its label as explained previsouly, and you'll be good to go !

Thanks to how this Sidebar is built, changes you make on Desktop would also be kept for the Mobile version. You don't have to make these modifications twice.