♻️ Optimized responsive navigation

lib/widgets/navigation/app_drawer_navigation.dart

@@ -1,5 +1,3 @@
-import 'dart:math' as math;
-
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
 import 'package:go_router/go_router.dart';
@@ -9,7 +7,8 @@ import 'package:styled_widget/styled_widget.dart';
 import 'package:surface/providers/navigation.dart';
 
 class AppNavigationDrawer extends StatefulWidget {
-  const AppNavigationDrawer({super.key});
+  final double? elevation;
+  const AppNavigationDrawer({super.key, this.elevation});
 
   @override
   State<AppNavigationDrawer> createState() => _AppNavigationDrawerState();
@@ -43,6 +42,7 @@ class _AppNavigationDrawerState extends State<AppNavigationDrawer> {
         ];
 
         return NavigationDrawer(
+          elevation: widget.elevation,
           backgroundColor: backgroundColor,
           selectedIndex: nav.currentIndex,
           children: [
@@ -56,7 +56,7 @@ class _AppNavigationDrawerState extends State<AppNavigationDrawer> {
               ],
             ).padding(
               horizontal: 32,
-              top: math.max(MediaQuery.of(context).padding.top, 16),
+              top: MediaQuery.of(context).padding.top > 16 ? 0 : 16,
               bottom: 16,
             ),
             ...destinations.where((ele) => ele.isPinned).map((ele) {

lib/widgets/navigation/app_rail_navigation.dart

@@ -0,0 +1,68 @@
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/material.dart';
+import 'package:go_router/go_router.dart';
+import 'package:material_symbols_icons/symbols.dart';
+import 'package:provider/provider.dart';
+import 'package:styled_widget/styled_widget.dart';
+import 'package:surface/providers/navigation.dart';
+
+class AppRailNavigation extends StatefulWidget {
+  const AppRailNavigation({super.key});
+
+  @override
+  State<AppRailNavigation> createState() => _AppRailNavigationState();
+}
+
+class _AppRailNavigationState extends State<AppRailNavigation> {
+  @override
+  void initState() {
+    super.initState();
+    WidgetsBinding.instance.addPostFrameCallback((_) {
+      context
+          .read<NavigationProvider>()
+          .autoDetectIndex(GoRouter.maybeOf(context));
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final nav = context.watch<NavigationProvider>();
+
+    return ListenableBuilder(
+      listenable: nav,
+      builder: (context, _) {
+        final destinations =
+            nav.destinations.where((ele) => ele.isPinned).toList();
+
+        return NavigationRail(
+          selectedIndex: nav.currentIndex,
+          destinations: [
+            ...destinations.where((ele) => ele.isPinned).map((ele) {
+              return NavigationRailDestination(
+                icon: ele.icon,
+                label: Text(ele.label).tr(),
+              );
+            }),
+          ],
+          trailing: Expanded(
+            child: Align(
+              alignment: Alignment.bottomCenter,
+              child: StyledWidget(
+                IconButton(
+                  icon: const Icon(Symbols.menu),
+                  onPressed: () {
+                    Scaffold.of(context).openDrawer();
+                  },
+                ),
+              ).padding(bottom: 16),
+            ),
+          ),
+          onDestinationSelected: (idx) {
+            nav.setIndex(idx);
+            GoRouter.of(context).goNamed(destinations[idx].screen);
+          },
+        );
+      },
+    );
+  }
+}

lib/widgets/navigation/app_scaffold.dart

@@ -6,77 +6,83 @@ import 'package:surface/widgets/dialog.dart';
 import 'package:surface/widgets/navigation/app_background.dart';
 import 'package:surface/widgets/navigation/app_bottom_navigation.dart';
 import 'package:surface/widgets/navigation/app_drawer_navigation.dart';
+import 'package:surface/widgets/navigation/app_rail_navigation.dart';
 
 class AppScaffold extends StatelessWidget {
-  final PreferredSizeWidget? appBar;
-  final FloatingActionButtonLocation? floatingActionButtonLocation;
-  final Widget? floatingActionButton;
   final String? title;
   final Widget? body;
-  final bool autoImplyAppBar;
+  final bool showAppBar;
   final bool showBottomNavigation;
-  final bool showDrawer;
   const AppScaffold({
     super.key,
-    this.appBar,
-    this.floatingActionButton,
-    this.floatingActionButtonLocation,
     this.title,
     this.body,
-    this.autoImplyAppBar = false,
+    this.showAppBar = true,
     this.showBottomNavigation = false,
-    this.showDrawer = false,
   });
 
   @override
   Widget build(BuildContext context) {
-    final isShowDrawer = showDrawer
-        ? ResponsiveBreakpoints.of(context).smallerOrEqualTo(MOBILE)
-        : false;
     final isShowBottomNavigation = (showBottomNavigation)
         ? ResponsiveBreakpoints.of(context).smallerOrEqualTo(MOBILE)
         : false;
 
     final state = GoRouter.maybeOf(context);
+    final autoTitle = state != null
+        ? 'screen${state.routerDelegate.currentConfiguration.last.route.name?.capitalize()}'
+        : 'screen';
 
-    final innerWidget = AppBackground(
-      child: Scaffold(
-        appBar: appBar ??
-            (autoImplyAppBar
-                ? AppBar(
-                    title: title != null
-                        ? Text(title!)
-                        : state != null
-                            ? Text(
-                                ('screen${state.routerDelegate.currentConfiguration.last.route.name?.capitalize()}')
-                                    .tr(),
-                              )
-                            : null)
-                : null),
-        body: body,
-        floatingActionButtonLocation: floatingActionButtonLocation,
-        floatingActionButton: floatingActionButton,
-        drawer: isShowDrawer ? AppNavigationDrawer() : null,
-        bottomNavigationBar:
-            isShowBottomNavigation ? AppBottomNavigationBar() : null,
-      ),
+    return Scaffold(
+      appBar: showAppBar
+          ? AppBar(
+              title: Text(title ?? autoTitle.tr()),
+            )
+          : null,
+      body: body,
+      bottomNavigationBar:
+          isShowBottomNavigation ? AppBottomNavigationBar() : null,
+    );
+  }
+}
+
+class AppRootScaffold extends StatelessWidget {
+  final Widget body;
+  const AppRootScaffold({super.key, required this.body});
+
+  @override
+  Widget build(BuildContext context) {
+    final devicePixelRatio = MediaQuery.of(context).devicePixelRatio;
+
+    final isCollapseDrawer =
+        ResponsiveBreakpoints.of(context).smallerOrEqualTo(MOBILE);
+    final isExpandDrawer = ResponsiveBreakpoints.of(context).largerThan(TABLET);
+
+    final innerWidget = isCollapseDrawer
+        ? body
+        : Row(
+            children: [
+              Container(
+                decoration: BoxDecoration(
+                  border: Border(
+                    right: BorderSide(
+                      color: Theme.of(context).dividerColor,
+                      width: 1 / devicePixelRatio,
+                    ),
+                  ),
+                ),
+                child: isExpandDrawer
+                    ? AppNavigationDrawer(elevation: 0)
+                    : AppRailNavigation(),
+              ),
+              Expanded(child: body),
+            ],
+          );
+
+    return AppBackground(
+      child: Scaffold(
+        body: innerWidget,
+        drawer: !isExpandDrawer ? AppNavigationDrawer() : null,
+      ),
     );
-
-    if (showDrawer && ResponsiveBreakpoints.of(context).largerThan(MOBILE)) {
-      final devicePixelRatio = MediaQuery.of(context).devicePixelRatio;
-
-      return Row(
-        children: [
-          AppNavigationDrawer(),
-          VerticalDivider(
-            width: 1 / devicePixelRatio,
-            thickness: 1 / devicePixelRatio,
-          ),
-          Expanded(child: innerWidget),
-        ],
-      );
-    }
-
-    return innerWidget;
   }
 }