Sidebar 4

⚠️ This documentation is shared for Sidebar 1, Sidebar 2, Sidebar 4 and Sidebar 5. 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 1 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 1

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 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 1 (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 integreted into your app, well done !

Customizing the styles

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

Editing Tab's labels

If you take a closer look at how this sidebar's tabs are built, you'll see that their label is set through a dynamic expression.

Why ? because it makes it more scalable and easier to maintain when you build your navigation system (although you can change this and add static text if you want to).

Therefore, in order to change the Tab's Label, all you need to do is select the Tab Group and edit the text inside the "Data source" input, like below :

Repeat the operation for each tab, and you're good to go.

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 it's built, changes you make on Desktop would also be kept for the Mobile version. You don't have to make these modifications twice.

Optional : Converting it into a Reusable Element

In some use cases, you may need to turn this Sidebar into a Reusable Element, to reuse it across several pages of your app.

Here's how to do it, in under 2 min.

1 - Once you've pasted the Sidebar in your app, Right-Click it and Click on "Convert to reusable element". This will create a new Reusable Element with the component you selected.

Give this new Reusable a name and create it.

2 - In the Reusable Element's editor, change the Reusable Element's type to "Floating Group".

3 - Go back to your page and remove the Sidebar component to replace it with the Reusable Component we've just created.

4 - Now we've pasted it, we'll need to adjust the Reusable Element's properties, in order to adapt it to our page.

Make sure to uncheck "fit height to content" and give it a Max Width that has the same value as your Sidebar's width (256px in my case).

5 - Now we simply need to add a conditional on the Reusable Element to get rid of the max width on narrower screen width.

By default, the Sidebar 1 switches to its mobile version under 992px of page width. So that will be my value.

Here's how it looks :

And there you go ! Your sidebar has been turned into a Reusable Element 🥳