BottomNavigation for Nested Routing (Web & Mobile) RouterService / NavigatorService?

[davidjadczyk]

So I am developing an application for Web and Mobile. I have multiple Views:
: HomeView --> LoginView
: MainLayoutView --> {EventsView --> EventsDetailView, DocumentsView --> DocumentsDetailView}

For the Authenticated part I want to display a BottomNavigationBar in the MainLayoutView, which can switch between EventsView, and DocumentsView, that both have additional NestedRoutes.

Question:

What would be the best way to leverage the available Stacked Components for achieving a clean implementation for this UseCase, as the examples don't show a nested bottom nav bar example? I've seen components like, ExtendedNavigator, NestedRouter, NavigationService and RouterService. Would love to see some clarification to optimally make it work for Web and Mobile.

Currently this is the routes structure in my app:

@StackedApp(
  routes: [
    CustomRoute(
        page: HomeView,
        path: "",
        initial: true,
        transitionsBuilder: TransitionsBuilders.noTransition,
        guards: [IsAuthGuard]),
    CustomRoute(
        page: LoginView,
        path: "login",
        transitionsBuilder: TransitionsBuilders.fadeIn,
        guards: [IsAuthGuard]),
    CustomRoute(page: MainLayoutView, initial: true, guards: [
      AuthGuard
    ], children: [
      CustomRoute(
          page: EventsView,
          path: "events",
          guards: [AuthGuard],
          transitionsBuilder: TransitionsBuilders.noTransition,
          children: [
            CustomRoute(
                page: EventDetailView,
                //path: ":eventId",
                guards: [AuthGuard],
                transitionsBuilder: TransitionsBuilders.slideLeft),
          ]),
      CustomRoute(
          page: DocumentsView,
          path: "documents",
          guards: [AuthGuard],
          transitionsBuilder: TransitionsBuilders.noTransition,
          children: [
            CustomRoute(
                page: DocumentDetailView,
                //path: ":documentId",
                guards: [AuthGuard],
                transitionsBuilder: TransitionsBuilders.slideLeft),
          ]),
    ]),

    CustomRoute(page: UnknownView, path: '/404'),

    /// When none of the above routes match, redirect to UnknownView
    //RedirectRoute(path: '*', redirectTo: '/404'),
// @stacked-route
  ]