Mimic Navbar Toggle

HI there,

I was looking at the following bootstrap template I want to reproduce with Bubble.
https://colorlib.com/polygon/gentelella/

I tried to use a draggable group to move de content left and right be setting the offset of the small blue shape and right to match the size of the collapsable navbar.

image

It does work partly:
image
But it only work nicely when I set the grey container group to a max width.

But the bootstrap templates also makes the content part a bit wider (fills the extra space that is available. Is this possible without code/scripting in Bubble? If so, then how?

I think I have the find a possible solution. I need to finetune it to mimic the template stated. But I do the following.

I make the content container max width based on the narrow navbar (floating group). The narrow navbar is not visible on page load. The wide navbar is visible.

When the wide navbar is visible, I set the left border of the container group as wide as the difference between the narrow and wide navbar. The border has the same color as the background. In that way the content in the container group is pushed to the right. When I click the bar icon again. The wide navbar is hidden and narrow navbar is shown. The left border goes away and the content in the container group is pushed to the left again.

Any thoughts on this implementation?

On click on the bar icon. THe narrow navbar I toggle both navbar

Not feasibly, IMO. I’ve been trying to accomplish this for a while. Due to the way Bubble renders your app, you would need to actually resize and reposition every element in the “content” group.
I’ve even asked them to give us access to the function that would allow this (they stayed silent about that).

@FJP’s method will move the content over, so will guarav’s slideable menu plugin and so will a line of javascript. This will not “make the content part wider”, just shift it out of the page.

Thanks. So only options I have are:

  • duplicate everything in the content container for both wide and narrow container (which is not an option that is easilymaintainable in the end)
  • or just let wide navbar slide over content container
  • Use the same script the template is using which is sort of coding am I right?

Somewhat. I’m building out a similar solution for a project I have now, just I’m using reuseable elements for everything. So it’s not exactly duplicating and it should be manageable. I can post back here when I’m finished to let you know if it was workable.

You’d basically be rebuilding with no bubble elements whatsoever, so using Bubble for this wouldn’t exactly be ideal.

Or the simplest, maybe most elegant solution: leave the menu in wide mode.

@duke.severn I would be very interested in your findings. I will also fiddle around more until I decide that just use a wide navbar which is then indeed then most elegant solution is the way to go for now.

I hope that bubble will introduce a a functionality for this. But thinking about it and the absolute positioning of elements this will be quite complex especially for the contents within the group that is stretched.

@duke.severn I was playing around with reusable elements, but then I cant get that element stretch when it is the container that is wider when shown in combination with the narrow version of the side bar. How do you do this?

Didn’t understand the question. Include screens.

Hi @duke.severn never mind. While gathering the screenshots, I noticed it does work with reusable elements

Yellow blocks (reusable element). Are a bit smaller then when the wide navbar is active. The yellow blocks are stretching when small navbar is active. Exactly what I wanted to achieve.

1 Like

Is it me or have you managed to get the content on the right (3 amber rectangles) to stretch?

@jamesbond Yes I did.

But what you see are two different white contaner groups. Wich are toggled accordingly to the sidebar size that’s active. So that’s what have to duplicate. Both are set to collapse height when hidden

The 3 yellow groups are part of a reusable element. So content that’s modified there is directly visible on both views.

Due to the responsiveness engine the groups in the reusable element are stretching in the reusable element. No I have to get responsiveness and margins the way I want on mobile view ports. Keep you posted of me progress.

1 Like

Yes. That’s how I’m doing it as well. Now to see how big we can build it before running into problems.

First note: Your REU’s will need to communicate. All persisting and display-related custom states have to be put at the REU level, and you’ll need to add a do everytime to sync them. Still figuring out the lightest solution, but if you don’t, your user will open the menu and see a different “content” element.

@duke.severn Thanks I will take this into account.

I’m trying to follow along with this thread and I have a couple of questions @duke.severn or @FJP might be able to answer.

  1. The content container is a white background. There are two content containers, one is wide and one is narrower. These are set to be displayed on click of button ( toggle ) which coincide with a wider or narrower side menu.

  2. The stretched yellow boxes are re-usable elements which are placed in both of the 2 white containers. These yellow boxes could in fact be any type of an element.

  3. The way the re-usable elements were stretched on the wider content container was through custom states?

  4. The custom states are meant to sync the content of the reusable elements to maintain consistency when views are changed?

Ultimately I am at the stage of trying to wrap my head around how I can have a content container element that displays messages to “stretch” when the sidebar menu is collapsed “hidden”.

I just don’t fully understand how the reusable elements ( yellow boxes ) are stretched in the wider container. My thoughts of reusable elements are that they remain the same ( sizes and margins etc. )

Is there some way to set them to stretch by simply making them “not fixed width”?

Hi @boston85719

I will post some screenshots later (maybe tommorow) but here are my answers.

  1. Yes, I have two content containers (height: 1000px) like you describe. I have placed the wide one at the position 0,0 (x,y). The narrow one has position (0,1000). Both are set to collapse height when hidden. Eventually I toggled a custom state (menu_active y/n) and used conditions on the content containers to show/hide each accordingly.

  2. Yes, I only used reusable elements so that I didn’t need to configure each functionality twice for each content container. For example my reusable element consists of a repeating group to display a list with data and a button to create a new record. No I just add this reusable element on both content containers.

  3. No it is simpler. I optimized the width of the reusable element to fit the narrower content container. I also optimized the responsiveness of the reusable element. When I placed the reusable element on the wide container I just increased/stretched the width of the reusable element to have the same left and right margin as it has on the narrower content container. This is giving the stretch effect. (Screenshots will be added soon).

  4. This I can’t answer yet. I am working on this, but so far I didn’t run into issues regarding this. But I believe that as long you control the reusable elements by custom states it needs to be a custom state at the level of the reusable element.

I hope I answered some of your questions. Good luck!

Thanks @FJP

I got started on this just now…seems pretty straight forward at a basic level.

One thing I found out is it is necessary to resize the reusable element to be wider when placed on the container group that is wider.

Once I did that, I got the groups in my reusable element to expand.

I’ll post more when I get further along. Looking forward to see how you get on with it as well.

Great work @boston85719. Resizing of the reusable element on the wide container was what I meant with"stretch the reusable element to the same left/right margin as the reusable element on the small container"

I will share some screenshots on what I am working on, when I have more progress on the data table functionality I have in mind.

1 Like

@FJP

I spent sometime putting together a reusable element for a chat messenger screen.

First thing I did was created the messenger screen at its smallest size ( for me that is 320px - yeah I still have an iPhone 5 ). After I had everything working I copied that group to a reusable element.

Everything stretches as expected. Still have some tweaks to make it work better for my purposes. Seems like the idea you and @duke.severn presented in the thread is spot on for its purposes.

Most important thing to remember is to stretch the reusable element when you place it on the page for the contents to expand or contract if you wish.

On my app I am using custom states to hide/show the different group elements on the page.

Here is a link to the video to show what it is doing.

Hope it helps.

4 Likes