How to implement platform specific navigation bar?

[Orkunnnn]

Hi, I am building web/mobile app and I want to achieve different navigation bar for different platforms. For example, in the web the navigation bar is usually persistent across pages but in mobile there are some scenarios that navigation bar should not be seen.
I have three pages. BookListView, BookDetailView, SettingsView. BookListView and SettingsView are in the navigation bar and from the BookListView users can navigate to selected BookDetailView. In mobile I want to open the BookDetailView in a seperate page (navigation bar hidden), but in the web I want to open BookDetailView in the same page with navigation bar. Currently I can't achieve this goal because in router file if I define the routes as a children of main layout (scaffold with navigation bar), the BookDetailView is can not be opened as a seperate page on the mobile. One solution that comes into my mind is defining different routes for platforms and doing some platform checks to use correct route but that can be messy I think. Is there any other way to implement this?
Image examples:
Layout on Web:


Layout on mobile:

I want to hide navigation bar on this page

app_router.dart

Code sample

import "package:auto_route/auto_route.dart";
import "package:finansal_ozgur/home/view/home_view.dart";
import "package:finansal_ozgur/layout/view/layout_view.dart";
import "package:flutter/material.dart";

part "app_router.gr.dart";

@AutoRouterConfig(replaceInRouteName: "View,Route")
final class AppRouter extends _$AppRouter {
  @override
  List<AutoRoute> get routes => [
        AutoRoute(
          path: "/",
          page: LayoutRoute.page,
          initial: true,
          children: [
            AutoRoute(
              page: BooksRoute.page,
              path: "books",
              children: [
                AutoRoute(
                  page: BookListRoute.page,
                  path: "",
                  title: (context, data) => "Books List",
                ),
                AutoRoute(
                  page: BookDetailRoute.page,
                  path: ":id",
                  title: (context, data) =>
                      "Book Details ${data.pathParams.get("id")}",
                ),
              ],
            ),
            AutoRoute(page: SettingsRoute.page, path: "settings"),
          ],
        ),
      ];

  @override
  RouteType get defaultRouteType => const RouteType.adaptive();
}

layout_view.dart

Code sample

import "package:auto_route/auto_route.dart";
import "package:finansal_ozgur/app/app_router.dart";
import "package:flutter/material.dart";
import "package:flutter_adaptive_scaffold/flutter_adaptive_scaffold.dart";

@RoutePage()
class LayoutView extends StatelessWidget {
  LayoutView({super.key});

  final _destinations = <RouteDestination>[
    const RouteDestination(
      route: BooksRoute(),
      icon: Icons.home,
      label: "Home",
    ),
    const RouteDestination(
      route: SettingsRoute(),
      icon: Icons.settings,
      label: "Settings",
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return AdaptiveLayout(
      internalAnimations: false,
      topNavigation: SlotLayout(
        config: <Breakpoint, SlotLayoutConfig>{
          Breakpoints.large: SlotLayout.from(
            key: const Key("Top Navigation Large"),
            builder: (context) {
              return AutoRouter(
                builder: (context, content) {
                  var activeIndex = _destinations.indexWhere(
                    (element) =>
                        context.router.isRouteActive(element.route.routeName),
                  );

                  if (activeIndex == -1) {
                    activeIndex = 0;
                  }

                  return Scaffold(
                    body: Row(
                      children: [
                        NavigationRail(
                          destinations: _destinations
                              .map(
                                (item) => NavigationRailDestination(
                                  icon: Icon(item.icon),
                                  label: Text(item.label),
                                ),
                              )
                              .toList(),
                          selectedIndex: activeIndex,
                          onDestinationSelected: (index) {
                            // use navigate instead of push so you won't have
                            // many useless route stacks
                            context.navigateTo(_destinations[index].route);
                          },
                        ),
                        // child is the rendered route stack
                        Expanded(child: content),
                      ],
                    ),
                  );
                },
              );
            },
          ),
        },
      ),
      bottomNavigation: SlotLayout(
        config: <Breakpoint, SlotLayoutConfig>{
          Breakpoints.smallMobile: SlotLayout.from(
            key: const Key("Bottom Navigation Medium"),
            builder: (context) => AutoTabsRouter(
              routes: const [BooksRoute(), SettingsRoute()],
              transitionBuilder: (context, child, animation) => child,
              builder: (context, child) {
                return Scaffold(
                  body: child,
                  bottomNavigationBar: NavigationBar(
                    onDestinationSelected: context.tabsRouter.setActiveIndex,
                    selectedIndex: context.tabsRouter.activeIndex,
                    destinations: _destinations
                        .map(
                          (item) => NavigationDestination(
                            icon: Icon(item.icon),
                            label: item.label,
                          ),
                        )
                        .toList(),
                  ),
                );
              },
            ),
          ),
        },
      ),
    );
  }
}

class RouteDestination {
  const RouteDestination({
    required this.route,
    required this.icon,
    required this.label,
  });
  final PageRouteInfo route;
  final IconData icon;
  final String label;
}

@RoutePage()
class BooksView extends AutoRouter {
  const BooksView({super.key});
}