Navigation Component with Flutter Go Router

Question

I have this layout.

my go router code:

final appRouter = GoRouter(
  initialLocation: '/',
  routes: [
    GoRoute(
        path: '/',
        builder: (context, state) => HomePage(key: state.pageKey),
        routes: [
          GoRoute(
            path: 'dashboard',
            builder: (context, state) => DashboardPage(),
          ),
          GoRoute(
            path: 'audit',
            builder: (context, state) => const AuditPage(),
          ),
        ]),
  ],
  errorPageBuilder: (context, state) => MaterialPage(
    key: state.pageKey,
    child: Scaffold(
      body: Center(
        child: Text(state.error.toString()),
      ),
    ),
  ),
);

How can I do if I want normal navigation just like bottom navigation or tab navitation. So, when I select each menu, it replaces the green panel with the screen. It may be simple to use state with condition. but it is possible to use with go router. I see nested navigation documentation. Its abit confusing.

There is something like this provided in AutoRoute package.