I am in early stages of my app. I am building this dashboard with a self built side bar, the dark side on the left with individual buttons and a large area to show all the stuff.
It seems like the app would be snappier/faster if instead of making separate pages for each menu item. Would it be better to show and hide groups on my big dashboard area rather than load a new page?
If I go the group method… I have all the groups to “hide” on page load. Then click button and show corresponding group. What is the best way to hide the previous group?
If I make a new page for each menu item - is there a way to make the sidebar on the left remain static instead of reloading?
Just seeking advise on pros and cons and best practice for creating my dasboard.
PS This app will not be a mobile app, just web browser from desktop.
There is no right and wrong way really, but personally, I’d go with showing/hiding groups. In general, it will make for a faster app, and it makes it a lot easier to retain temporary information such as states, etc. even as you navigate to another part of the page. I think the majority of members on this board would agree, but feel free to correct that notion.
Using actions to show and hide Groups is one way to go, but using States and Conditions is more flexible. Also, cutting down the number of actions in general seems to shave some loading time off the page load.
Check out the element template at the bottom of your Bubble Toolbar. This serves as a quick tutorial on how to use States and Conditions to show/hide groups. It’s a great way to learn about these two powerful features in general.
I’ll leave it at that, but feel free to ask follow-up questions!
I like show/hide groups and then I may have separate pages as well eg. an Admin page for me or a dedicated Payment page, depends on the project.
You may find this useful as an example of showing/hiding groups:
The purple dots down the bottom equate to your left hand navigation.
You can either use ‘When this clicked > hide this > show this > hide this > show this’ or you can use a condition on the element ‘When x is this State, hide this’. I believe the first example may result in a quicker page load but I haven’t fully tested this/can’t say for sure.
And in response to your other question, the menu is on the page so yes the whole page will reload including the menu when User navigates to another page.
