Creating a sidebar with mobile menu in Bubble.io

Creating a Sidebar with Mobile Menu in Bubble.io

If you're building a dashboard application in Bubble, you might be thinking on the lines of a design like this which uses a left-hand sidebar and the top bar. This is an example from the great components library at Tailwind UI. And I'm going to show you how to build this just structurally not perfect in Bubble as a way of just demonstrating how to use the responsive engine to achieve a layout like this.

Setting Up the Page Layout

So I have here a page. I'm in the new responsive engine. My app is old enough to remember the old responsive engine. I'm just going to make it a little bit bigger and then say layout as a row. So let's put in that left-hand sidebar. So I'm going to drag in a group and this is going to be fixed width and it's going to have a container layout of column because items are going to be going downwards in it. And I'm going to say fixed width. Let's just make that a nice round value, 250. And I'm going to give it a background color so that it stands out. Okay, let's preview that. Okay, so we can see that it's anchored to the left-hand side of my page.

Adding the Top Bar

We then got a top bar here. So let's add that in. So I now need to create a group to contain everything that isn't the right hand, sorry, the left hand navigation sidebar. That's the word I was looking for. And so I've dragged in the group and then layout. I'm going to say column. And I'm going to get rid of the min width and it's going to then fill up all of the space. I'm not going to do fixed content. I wanted to fill up any space that isn't taken up by the 250 here. Let's give that a background color so that it really clearly stands out.

Creating the Top Bar

Okay, and then we have a top bar here. And the top bar in this case is going to be inside of, let's name this body. And let's name this left. It's going to be inside of the body. You could go for a design where the top bar goes all the way across. Hopefully this video reveals enough for you to work that one out. So if I go group and I put that group in here and we're going to call this top bar, I'm going to make it white so it stands out. Layout is going to be a row and get rid of the fixed width. And then it takes up the whole width across. Padding, let's just give an example of some good padding. So top and bottom eight sides, 20. That then would allow me to add in an icon up here. And if I then layout split them, I get an icon over on that side. Let's preview that.

Making the Layout Responsive

Okay, and let's just inspect and see how responsive it is. So you can see it always fills the full width of my page and then I shrink down. That last bit is a bit funny because of this text which appears on the bottom and I've got the debugger mode on true. But you can see there comes a point where it needs to go from, let's make that a bit bigger, when it needs to go from like a desktop mode to a mobile or a tablet mode. So let's work on that and to do that, I'm going to very quickly add in, let's give, I will make it neat. Let's say 40.

Adding Menu Items

Okay, and then I put this into a group and you'll see why in the moment, group column, and I'm going to call this menu items. And then I'm going to copy my button. This is as if, I mean, this like here is kind of top level navigation links in the app. Let's apply gap spacing between elements here. Okay, and then I'll just say that this, these are all, I should have done this before copying and pasting it. These are all 100%. Let's just paste those back in again. Okay, right.

Creating a Reusable Element for Menu Buttons

So when the page gets to a certain width, I basically want this this left sidebar to disappear and then I want, this is going to be my hamburger, because I want to be able to access this same list here. And the way I'm going to do that is by using a reusable element. So I'm going to convert this to a reusable element and say menu links. Oh, that's what buttons is the best description.

Implementing Responsive Behavior

Okay, and then if I go back to my, sidebar. So by creating a reusable element, it hasn't made this a reasonable element, it's created it a new down here under reusable elements. So I have to delete this example. And then I can search for it, menu buttons, and add it back in. Okay, so when the page gets to a certain width, I would like this to disappear. And so I can can play with it. And we'll say, why don't we say that 7 6 8. And so I can add on a conditional statement of page of current page width is equal to or less than 7 6 8. And then I can say this element is visible and untick it. I also need to check this box here because that removes it from taking up space on the page. And we can see that in action there, it goes away and it comes back.

Adding the Hamburger Menu

I need to do the sort of the opposite. In fact, I'll do it like this. So I don't want that to load on the page. I want it to collapse when empty. But when page width, and it's the same expression is equal to or less than 7 6 8. I want it to be visible again. What have I missed out here? Maybe that's going to work. Oh, there we go. So yeah, so my hamburger has come back into view.

Implementing Group Focus for Mobile Menu

Now, how do I put this item and attach to my hamburger? So I can use a group focus. And the group focus has to be attached to an item. And so the group focus is going to be attached to my Iqam bars. Now this might be a little bit buggy. I was running through this with a Coaching client a few days ago, because the bars is hidden at this point. But I know that it's attached because I've made it attached there. And it just frustratingly shows it up here. But the layout is going in here is going to be column. And then this is where I drag in my menu bar buttons so that they're showing again.

Finalizing the Mobile Menu

We'll very quickly find out whether this is indeed a bug in the editor, or it's going to affect how things... But there we go. So when I make it visible in the... I make my hamburger visible in the editor, it shows my group focus. And I want to edit the group focus. And I put a minus figure in here, or too far. So that it's not going off the edge of the page. Taking its time. There we go. And then I put a value in here. And I also want to give this a background. Give it a background of white. No, to make it stand out, I'll do it like that. So that it's standing out and so it's nice and clear.

Adding Toggle Functionality

I don't want to add a toggle to this. So when the bar icon, my hamburger, is clicked, I want to toggle the group focus. Let's test that. So my page is shrinking, it's shrinking, it's approaching, and it disappears. And up. It's hidden. It's there. I think it's there. It's hidden. It's hidden behind the responsive bar here. Let me just add some padding into that so it's really clear. Padding right. Let's just put that up to 100. Okay. Now let's try. As it's being hidden, not on the page, but by the UI of the Chrome responsive tool in the inspector.

Conclusion

So you see there, no hamburger. When the sidebar disappears, the hamburger comes in. When I click the hamburger, I get my same list of links. The reason for using a reusable element is that I then need to create that element. But that's not a real case scenario where the page changes size as you go. So yeah. Point is, I've used the reusable elements so that my menu items, I need to create them once and they're present on my left hand sidebar when I'm in desktop mode. But when I go into a smaller screen, I can access exactly the same list, exactly the same links using a hamburger and mobile menu.