How to avoid updating sidebar nav all the time

Hi All,

I'm trying to follow the best-practice, as showcased by a great blog post from bold tech. - in setting up my new app. I will use many different apps to put my 'super app' together.

However - I think I need to understand the logic a little bit better.....

So, for my top nav:

  • I have created a module - so that I can update in one place, any changes I need to do
  • When the user clicks on a nav option - it sets a localStorage variable (currentTopNav)

For my side nav:
I'm struggling a bit. Because I don't know how to set these up, so that if I make a change to my app (I.e. maybe I add a 'page' - which will be it's own app, in theory) for 'Delete organisation'. But I don't want to have to update all my apps under the heading 'organisation' - so, question - should I also somehow create a sidebar module?

I have also set a localStorage for (currentLeftNav)

For my breadcrumbs:

  • I am taking Breadcrumb one from local storage (currentTopNav)
  • I am taking breadcrumb two from local storage (currentLeftNav)

I'm sure there is a more efficient way, but I am struggling a bit to understand,

Any help is appreciated.
Neil

2 Likes

Hey Neil, thanks for the appreciation :grin: This is looking great! Would be happy to help here but not exactly sure what part you are stuck on - how to set up the module and its variables?

And what exactly do you want to have in the sidebar? If you aren't reusing the navigation in the sidebar for other pages, it probably wouldn't make sense to use a module, and just set up a single nav component instead. However, it seems like you are trying to use the same navigation across a few 'pages', so making another module is a good idea! That way you only need to edit the nav once.

I also wonder if your sidebar pages now, e.g. 'Add', 'Edit', 'Delete' might make more sense as actions on the page? Perhaps in a box with actions as link components? Or a dropdown button?

image

For your breadcrumbs, it might make sense to make use of Retool's context attributes for the current page:

image

And in some of our examples, the first step in the breadcrumb comes from a fixed place anyway, e.g. 'Organisation' in your case - so you could probably set the app link manually.

Does that all make sense? Let me know :slight_smile: Happy to have a stab at any more questions you might have - anything for a fan :wink:

2 Likes

Thanks Sophie.....

yes, indeed - I will share the left nav across many 'pages' - so, for example...... Organisation might have a few different pages. And we may add pages later - so ideally, the same left nav will be in all these pages (apps). So I think a module might be the best way.

Actually add /edit etc - were just examples so I could try and get my head around the setup. I will try to make that more logical although I did see your context attributes example in one of your blog posts - so I could consider that. But I thought I'd start with the basics first.

On the breadcrumbs - I just couldn't quite understand how it works with the appUuid - as it was just a load of numbers - not very useable, and I couldn't figure out how to change that......

thanks again!

1 Like