Collapsible Slidebar Menu

mac.mehani · 2021-02-09T03:31:01.946Z

I am having a hard time figuring this out.

I have a navbar on my app which I configured as a reusable element. The navbar has links to different pages.

I want to make the app responsive so that if a user is using the app on their phone, the links will hide in the slidebar hamburger icon. If the user wants to see the links that are in hidden, he would click on the slidebar hamburger icon which will show the hidden links/buttons.

Does anyone know how to do that?

I installed the slidebar menu pluggin by Bubble, but it’s not very intuitive on how to get the function I am looking for.

Thank you!

boston85719 · 2021-02-09T18:58:43.612Z

When you put the reusable element on the page, put it into a group, then set up workflow to toggle the group when the hamburger menu is clicked.

mac.mehani · 2021-02-10T01:46:02.015Z

Can you please give more information on how to do that?

I created the navbar with the links and all.

I also created a separate page as a reusable element.

I’m not able to create a workflow for when the user clicks on the slidable menu.

mac.mehani · 2021-02-10T01:51:09.055Z

Also, I have different links for different users. and logged in vs logged out.

ankur1 · 2021-02-10T07:44:50.891Z

Go to the Reusable element page and then click on workflow and create or edit new workflow according to your requirement.

boston85719 · 2021-02-10T07:47:24.852Z

mac.mehani:

I’m not able to create a workflow for when the user clicks on the slidable menu.

That is because it is not possible, which is why I gave the instructions to put it into a group.

Matthew McGowan:

When you put the reusable element on the page, put it into a group, then set up workflow to toggle the group when the hamburger menu is clicked.

boston85719 · 2021-02-10T07:48:13.150Z

That wouldn’t work unless the hamburger menu is in the reusable element, which it probably isn’t as usually the hamburger menu would be on the page and outside of the reusable element that contains the menu.

boston85719 · 2021-02-10T07:48:33.663Z

mac.mehani:

Also, I have different links for different users. and logged in vs logged out.

Need to set up conditionals

mac.mehani · 2021-02-12T02:13:23.579Z

The problem with their plugin is that it’s limited in it’s functionalities.

The thing with my app is that not everyone will have the same links in the navbar.

Specifically, I have sellers and customers.

If the current user is a seller, then he will be able to see a link “revenue” in the navbar. If the user is just a customer, I don’t want him to see it. To do that, I have different groups with different conditionals.

The slidebar plugin doesn’t have that function where I can show/hide links based on the group.

I found this link on the forum posted by someone at Bubble : Meta_public | Bubble Editor. You can see the Header and mobile menu page in the reusable elements and can preview the page to see how they made it work. That’s exactly what I need.

I was able to build most of it, the problem I am having right now is that the mobile menu is always showing on page load and I can’t toggle it.

Hope you can help!

Thank you

system · 2021-04-20T03:31:44.169Z

This topic was automatically closed after 70 days. New replies are no longer allowed.