We also launched a similar nav component called breadcrumb, which may be of interest to users working with the navigation component
The breadcrumb ability to know what page you on , should be potted to the nav component. Also module should allow setting SideBar and header and passing it props into them from a child app. Having to hack the app to get it to recognise saved application state is not the best way to go.
There should be a default expand all option
Got it! Sharing this feedback internally
Hello @tess!
I'm happy to use modules for the Sidebar but can't see how to do it. If I go to "Create new .." and "Module" and I get the design UI but Sidebar isn't a component I can choose from.
I also tried "Clone to module" which copies the app but leaves the sidebar behind.
I only have a few apps so inability to use module isn't the end the world, but it would be handy.
Hi @awilly thanks for reaching out! Sidebars aren't currently available in modules, but I was thinking the opposite--you can create a module and then import the module into a sidebar in your app
Thanks for the reply, Tess. I'm not sure I completely understand; but, I created the sidebar by hand and used copy and paste to move the navigation component to new apps. Not too bad.
Hi @awilly
Good point, thanks for sharing what worked!
I was thinking you could create a module with the components that you want to be in your sidebar->Then create an app with a sidebar->Clear out the default sidebar components->Then drag & drop your module inside the sidebar:
That said, per @blackst's feedback, you could run into extra complexity/limitations with this approach, so copy + paste may be a good solution for now
Has there been any progress on this matter? I am keen on implementing the same sidebar across multiple applications without resorting to copy-pasting.
Same! The copy paste paste method is getting a little tedious.
I checked in about this, and we're going to be tackling this concept soon It's part of a larger project around multi-page apps
hope that multi page projects comes soon.
In the mean time can any one help me with any resource where I can see how to change page with the sidebar ? I am want to click and change page also clicked menu should be focused.
Introducing the Sidebar Frame: Create intuitive interfaces for complex apps by @maya is good example but she could have added some more features like changing page in her example that would help others more.
Thanks
Hi @mpmohi Thanks for checking in.
Our team is still actively working on multi page! Can't wait to have more updates soon, but no official timeline yet.
I recently posted a similar example in this modules post. It doesn't sound like you're specifically using modules, but it may help with your case still TLDR - you'll want to create Custom event handlers for the Go to App events, and then set the Highlight to be true when you're on that page.
thanks for writing a good post on modules. Good work, Keep it up.
Hi all,
I've been going through this - and I think something is just a bit lost in translation and the intuitiveness of the retool modules functionality.
Instinctively, when you create your nav bar for the side bar, as a module - it looks like a big horrible app (see below):
But stick with it.
Create your nav, and then close the module.
Go to your app, open the sidebar and just drag your module in. You will see it formats as you'd expect (and not as a strange, full page app).
So - now when you need to add an item to your nav, just update the module:
you can resize the working area in the module so it visually looks correct when editing it. I've found the easiest way to select it is with the Component Tree
just click the moduleContainer and the blue box to resize it will appear. this could change the visual formatting in the parent though. for example, if you have a module with width '2' and in the parent you resize the component to fit the parent style and it ends up with a width of '4', it seems like all the positioning of child elements are adjusted by a scale of 1:2 which can mess up certain things depending on absolute/relative positioning and other things. so, you might find yourself having to go back and forth changing the module and how its used in the parent until both views are correct. once I got this right though I haven't needed to go back to the module to adjust position/size of things and it seems to be find with reusing it and resizing
Hi,
Is there any update on multi-page apps?
Thank you
So it took over a year but I finally came back to this post and understood it. Thanks, @Tess. We're using Navigation modules now.