✨ Drawer navigation

lib/widgets/navigation/app_bottom_navigation.dart

@@ -1,6 +1,8 @@
+import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
 import 'package:go_router/go_router.dart';
-import 'package:surface/widgets/navigation/app_destinations.dart';
+import 'package:provider/provider.dart';
+import 'package:surface/providers/navigation.dart';
 
 class AppBottomNavigationBar extends StatefulWidget {
   const AppBottomNavigationBar({super.key});
@@ -10,23 +12,46 @@ class AppBottomNavigationBar extends StatefulWidget {
 }
 
 class _AppBottomNavigationBarState extends State<AppBottomNavigationBar> {
-  int _currentIndex = 0;
+  @override
+  void initState() {
+    super.initState();
+    WidgetsBinding.instance.addPostFrameCallback((_) {
+      context
+          .read<NavigationProvider>()
+          .autoDetectIndex(GoRouter.maybeOf(context));
+    });
+  }
 
   @override
   Widget build(BuildContext context) {
-    return BottomNavigationBar(
-      currentIndex: _currentIndex,
-      type: BottomNavigationBarType.fixed,
-      showUnselectedLabels: false,
-      items: appDestinations.map((ele) {
-        return BottomNavigationBarItem(
-          icon: ele.icon,
-          label: ele.label,
+    final nav = context.watch<NavigationProvider>();
+
+    return ListenableBuilder(
+      listenable: nav,
+      builder: (context, _) {
+        if (!nav.isIndexInRange(0, nav.pinnedDestinationCount)) {
+          return const SizedBox.shrink();
+        }
+
+        final destinations = [
+          ...nav.destinations.where((ele) => ele.isPinned),
+        ];
+
+        return BottomNavigationBar(
+          currentIndex: nav.getIndexInRange(0, nav.pinnedDestinationCount),
+          type: BottomNavigationBarType.fixed,
+          showUnselectedLabels: false,
+          items: destinations.map((ele) {
+            return BottomNavigationBarItem(
+              icon: ele.icon,
+              label: ele.label.tr(),
+            );
+          }).toList(),
+          onTap: (idx) {
+            nav.setIndex(idx);
+            GoRouter.of(context).goNamed(destinations[idx].screen);
+          },
         );
-      }).toList(),
-      onTap: (idx) {
-        setState(() => _currentIndex = idx);
-        GoRouter.of(context).goNamed(appDestinations[idx].screen);
       },
     );
   }

lib/widgets/navigation/app_destinations.dart

@@ -1,33 +0,0 @@
-import 'package:easy_localization/easy_localization.dart';
-import 'package:flutter/material.dart';
-import 'package:material_symbols_icons/symbols.dart';
-
-class AppNavDestination {
-  final String label;
-  final String screen;
-  final Widget icon;
-
-  AppNavDestination({
-    required this.label,
-    required this.screen,
-    required this.icon,
-  });
-}
-
-List<AppNavDestination> appDestinations = [
-  AppNavDestination(
-    icon: Icon(Symbols.home, weight: 400, opticalSize: 20),
-    screen: 'home',
-    label: tr('screenHome'),
-  ),
-  AppNavDestination(
-    icon: Icon(Symbols.explore, weight: 400, opticalSize: 20),
-    screen: 'explore',
-    label: tr('screenExplore'),
-  ),
-  AppNavDestination(
-    icon: Icon(Symbols.account_circle, weight: 400, opticalSize: 20),
-    screen: 'account',
-    label: tr('screenAccount'),
-  ),
-];

lib/widgets/navigation/app_drawer_navigation.dart

@@ -0,0 +1,76 @@
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/material.dart';
+import 'package:go_router/go_router.dart';
+import 'package:provider/provider.dart';
+import 'package:styled_widget/styled_widget.dart';
+import 'package:surface/providers/navigation.dart';
+
+class AppNavigationDrawer extends StatefulWidget {
+  const AppNavigationDrawer({super.key});
+
+  @override
+  State<AppNavigationDrawer> createState() => _AppNavigationDrawerState();
+}
+
+class _AppNavigationDrawerState extends State<AppNavigationDrawer> {
+  @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),
+          ...nav.destinations.where((ele) => !ele.isPinned),
+        ];
+
+        return NavigationDrawer(
+          selectedIndex: nav.currentIndex,
+          children: [
+            Column(
+              mainAxisSize: MainAxisSize.min,
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                Text('Solar Network').bold(),
+                Text('Solar Network 2.0α').fontSize(12).textColor(
+                    Theme.of(context).colorScheme.onSurface.withOpacity(0.5)),
+              ],
+            ).padding(
+              horizontal: 32,
+              vertical: 8,
+            ),
+            ...destinations.where((ele) => ele.isPinned).map((ele) {
+              return NavigationDrawerDestination(
+                icon: ele.icon,
+                label: Text(ele.label).tr(),
+              );
+            }),
+            const Divider(),
+            ...destinations.where((ele) => !ele.isPinned).map((ele) {
+              return NavigationDrawerDestination(
+                icon: ele.icon,
+                label: Text(ele.label).tr(),
+              );
+            }),
+          ],
+          onDestinationSelected: (idx) {
+            nav.setIndex(idx);
+            GoRouter.of(context).goNamed(destinations[idx].screen);
+            Scaffold.of(context).closeDrawer();
+          },
+        );
+      },
+    );
+  }
+}

lib/widgets/navigation/app_scaffold.dart

@@ -5,6 +5,7 @@ import 'package:responsive_framework/responsive_framework.dart';
 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';
 
 class AppScaffold extends StatelessWidget {
   final PreferredSizeWidget? appBar;
@@ -14,6 +15,7 @@ class AppScaffold extends StatelessWidget {
   final Widget? body;
   final bool autoImplyAppBar;
   final bool showBottomNavigation;
+  final bool showDrawer;
   const AppScaffold({
     super.key,
     this.appBar,
@@ -23,12 +25,14 @@ class AppScaffold extends StatelessWidget {
     this.body,
     this.autoImplyAppBar = false,
     this.showBottomNavigation = false,
+    this.showDrawer = false,
   });
 
   @override
   Widget build(BuildContext context) {
+    final isShowDrawer = showDrawer;
     final isShowBottomNavigation = (showBottomNavigation)
-        ? ResponsiveBreakpoints.of(context).smallerOrEqualTo(MOBILE)
+        ? (ResponsiveBreakpoints.of(context).smallerOrEqualTo(MOBILE))
         : false;
 
     final state = GoRouter.maybeOf(context);
@@ -50,6 +54,7 @@ class AppScaffold extends StatelessWidget {
         body: body,
         floatingActionButtonLocation: floatingActionButtonLocation,
         floatingActionButton: floatingActionButton,
+        drawer: isShowDrawer ? AppNavigationDrawer() : null,
         bottomNavigationBar:
             isShowBottomNavigation ? AppBottomNavigationBar() : null,
       ),