Multiple application layout

In application I have one side menus.

I have listed all the route in router.ts.

export const router = new Router(document.querySelector(‘#outlet’));

router.setRoutes(routes);

Now I need to add one more side menus and each menu have different route so I need to achieve sub route for new view.

Can any help here ?

Sounds like you could to register child views and have the second side bar as their parent. You can nest layouts several levels deep if needed

how did you solve this.

Something like this:

const routes = [
  {
    path: '',
    component: 'main-view',
    children: [
      {
        path: '',
        component: 'hello-world-view',
      },
      {
        path: 'about',
        component: 'about-view',
        action: async () => {
          await import('./views/about/about-view');
        }
      },
      {
        path: 'users',
        component: 'users-view',
        children: [
          {
            path: '',
            component: 'all-users-view',
          },
          {
            path: ':id',
            component: 'user-details-view',
          }
        ]
      }
    ]
  }
];

Thanks.