Reusable Sidebar

Hello guys,

Thanks for the sidebar and navigation components.

Now is there anyway I can create a sidebar component and re-use in different pages, rather than having to recreate for every single page.

Also any links to creating a layout with design for header, sidebar and main page. So every time I want to create a new app i can start with a predefined template?

Thanks

hey @blackst could you use a module for these instances?

1 Like

tried, module does not work proper. Such a shame, Should be straightforward to create an app template that inherit header and sidebar automatically. Also the new nav component does not have expanded default state or active nav item.

Hi @blackst thanks for this feedback! I believe our team is working on templating options :crossed_fingers: I don't have an eta though, so I'd also suggest modules for the time being. Can you share some more feedback on how the module isn't working? I'll pass that on to our team

For the navigation, could you configure the active nav item using the highlight field?

I'll share this feedback about expended default state as a feature request!

We also launched a similar nav component called breadcrumb, which may be of interest to users working with the navigation component :slightly_smiling_face:

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.

1 Like

There should be a default expand all option

1 Like

Got it! Sharing this feedback internally :blush:

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

1 Like

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 :pray: It's part of a larger project around multi-page apps

2 Likes

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

1 Like

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 :blush: 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.

Hey @Tess - This solution worked for me. Many thanks!