Slider sidebar and hide partly

Need help
1

Hi, I need help on :

A) Collapsible sliding bar ( not fully so icons are still visible)

image
image1038×1626 239 KB

The image above has text labelled ‘ collapsible’ when clicked the slider side bar moves n covers text but icons on left would still be visible. How do I do this?

B) When I click on the text in the middle like Account ( Yellow highlighted) or Organisation or any of the text in the centre, a respective form should open up ( Red) How do I do this?

image
image1048×650 139 KB

Thanks!

Best,

Narayan

2

Hey @narayan,

So this isn’t super difficult to do, but there’s a number of steps to consider to answer both parts A & B, and depending on your knowledge of both the responsive editor and state management this could get quite lengthy and time consuming to write out. So I’m just going to give you some general pointers.

If this all goes totally over your head, I’d suggest starting with a couple of YouTube videos and making sure you understand these things first. They are foundational concepts that every Bubble developer should be across and you’ll use these things right through building your app. I promise you that :grinning_face_with_smiling_eyes:

State Management
Responsive Design

Part A

The way I would do this is set a YES/NO state on the left (black) group. Where you assume the default state NO is the open state and the collapsed state is YES.

You can then set conditionals on the elements that are impacted.

i.e.

  1. Define the width of the menu for each the YES/NO states.
  2. Hide the text when the collapsed state is YES, show when it’s NO

You can then set a workflow that when the collapse button at the bottom is pressed it’ll swap the state to the alternate state - i.e. NO becomes YES, YES becomes NO.

It’ll be a bit jumpy, but you can set some transition animations so it’s nice and smooth like butter :grinning:

Part B

You could achieve this with state management as well, but what I would do is set a workflow that whenever I click on each of those menu items it’ll set a page parameter (or use sudsy) and then have your inner tabs like Account, Organizations, General etc etc show when a particular URL parameter is present and hide otherwise.

If you need some help putting it into practice, then book some time with me and we can do it together on a zoom call.

Josh @ Support Dept
Helping no-code founders get unstuck fast :rocket:save hours, & ship faster with an expert :man_technologist: on-demand

1 Like
3

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