Separate Drawer in App Layout for different Main Views/Paths

Question

I have two different drawer view
1.app-drawer-projects
2.app-drawer-users.

I have two different Main view
1.app-project-view
2.app-user-view.

Now when I go to app-project-view path /project, I want to set the drawer to app-drawer-projects
and when I browse to app-user-view path /user, I want to set the drawer to app-drawer-users.

What is the best way to achieve this?

I tried creating two different MainLayout and set them in the routes, something like this, but it did not work, I can see the drawer defined in MainLayout.

export const routes: ViewRoute[] = [
  {
    path: "",
    component: "main-layout",
    children: views,
  },
  {
    path: "users",
    component: "main-layout-user",
    children: views,
  },
];

What is the best way to handle such dynamic drawer view