Persistent left nav / sidebar tutorial

Hi all, if anyone can point to a cloneable resource or tutorial for the persistent left navigation screen, would really appreciate it, thanks!

On my web app I’m redesigning (ugh) to remove the top section and replace with an app bar with a hamburger menu left icon. I’m guessing that upon click, the action will be to link to the persistent left nav screen (on all screens with the hamburger icon), and then follow on links from there to other screens within the app.

The problem I’m having is that on desktop web, the sidebar expands too much and takes up almost half the screen. I haven’t changed any settings from the template provided by Adalo.

I also ran into the same problem you mentioned. One workaround for this that might work (haven’t tested it out yet), is to set the size of the screen to 1920 x 1080, and resizing everything according to that. I don’t know if it will work, but one of the things I’ve been planning to test to fix this problem

Also you might check these earlier questions out:

Hi @tdhi,

An additional advice to @AddyEdwin’s one: you could also try to put rectangle on your right side of the screen - between the left nav bar and screen edge.
And then put all the content inside this rectangle.

What could be expected - with this rectangle both parts (left & right) may start to resize proportionally.


Some side notes:

But building responsive web app is not an easy task, unfortunately :frowning In my experience, designing a desktop web app is always done via trial & error.

As I understand, in most cases visual components in Adalo are responsive; so they try to keep proportions but not the exact pixels. However, in some cases the “fixed width” rules appear: usually when you have a small width elements, they remain fixed, while others which are “wider” are responsive.

I’ve spend quite a bit of time experimenting, see this thread & video for example:

Best,
Victor

1 Like

Thank you everyone. What worked for me was placing a rectangle component over the entire left navigation bar, and grouping it with the left navbar, making sure that the background color was off.

Now, does anyone know if it’s possible to create active/inactive colors upon cursor hover in a web app? The default Adalo left navbar component comes with a gray bar over the link/text “About”, as if it were active. I’m just going to remove it.

1 Like

As above, when I try to implement a side nav bar, my sidebar expands too much and takes up half the screen. The solution @tdhi suggests (adding a transparent rectangle on top) fixes the layout going crazy but then you can’t tap on any of the buttons behind the rectangle. Does anyone have a solution?

Hi @tjhc2 ,

As I think, possible solution could be limiting the height of this transparent rectangle to 0 or 1.

Best regards, Victor.

Hi @Victor, thanks for the reply. Do you have an example of this working I can see? I can’t get it to work.

I have tried many methods - read all kinds of forum examples, etc and I have been unable to create a sidebar navigation that is workable for my web app. Having a vertical scroller that works in the same manner as the horizontal scroller would be a great fix for this. This has actually been a big roadblock for the web/tablet app I am developing.

VERT_SCROLL

If this is currently possible and I’m just not finding it… please let me know. :slight_smile:

1 Like

Hi @tdhi – It took me an extreme amount of time to figure out why the sidebar would expand across the screen. Not to mention the frustration with Adalo editor. So I hope this can help in some way. I am still trying to get it to behave the way I needed it to, but is a good start.

There are many factors that go in to make it work just right and depending on your layout or design you will more than likely need to experiment a bit more.

Some factors,

  • Visual Layering
  • Component Ordering (Extremely important) related to what gets printed first on the page
  • Screen size
  • Groups
  • Spacing (or lack thereof )

Setup:

Preview:

The hide and unhide button is just a true/false toggle on the user collection. And the white expandable menu section is set to only visible if condition is true.

2 Likes

hay there. This looks awesome. How do you show and hide and set up the actions etc.
I feel like it should be easier than I am trying to build.
If this is just a test any chance you can clone it for me?

Great job @hobokencloud!

Perfect solution!

Best,
Victor

Hi @rkeehan – I made this clonable app so you can see how to apply all of the above in your project.

8 Likes

@hobokencloud - thanks for this. A relief to see that this was possible. Is there any way we can access this or can you provide a little bit more information on how you were able to put this together (for newbies :blush:)?

I love this template, it is awesome!

I am just curious if it is possible to make the expanded menu be scrollable? I am planning to add a bunch more items to it and then have sub menus appear when the items are clicked. With this, it is making the menu a bit larger so if the user could scroll on this menu that would be perfect!

Any ideas on how I could make this happen?

Hi @hobokencloud, @Colin

Can you help with information (tutorial / clonables) on how to create this image showing dashboard with left nav on app.

Thanks!
image
(upload://tZy6mj0tfzFiRLP43Jhz1X5wkHX.png)

How can this work in mobile app??

When we click on a menu item it opens the linked screen, but when we click back on the other screen it again takes us to the menu screen.

Instead of using “back”, go to the screen you want to return to

I meant the back button on the phone. we can’t force user to click on our own link. They can simply click phone’s back button.

Anyway, I used the same trick as for the web. Put all options on a rectangle in a group and then hide or unhide that group based on view menu toggle.