✨ Better navigation

lib/layouts/navigation.dart

@@ -5,23 +5,27 @@ import 'package:goatagent/screens/dashboard.dart';
 import 'package:goatagent/screens/notifications.dart';
 
 class AgentNavigation extends StatefulWidget {
-  const AgentNavigation({super.key});
+  AgentNavigation({super.key});
 
   static const items = [
-    NavigationDestination(
-      icon: Icon(Icons.home),
-      label: 'Dashboard',
-    ),
-    NavigationDestination(
-      icon: Icon(Icons.notifications),
-      label: 'Notifications',
-    ),
-    NavigationDestination(
-      icon: Icon(Icons.account_circle),
-      label: 'Account',
-    )
+    {'label': 'Dashboard', 'icon': Icon(Icons.home)},
+    {'label': 'Notifications', 'icon': Icon(Icons.notifications)},
+    {'label': 'Account', 'icon': Icon(Icons.account_circle)},
   ];
 
+  final bottomDestinations = items
+      .map((element) => BottomNavigationBarItem(
+            icon: element["icon"] as Widget,
+            label: element["label"] as String,
+          ))
+      .toList();
+  final railDestinations = items
+      .map((element) => NavigationRailDestination(
+            icon: element["icon"] as Widget,
+            label: Text(element["label"] as String),
+          ))
+      .toList();
+
   @override
   State<AgentNavigation> createState() => _AgentNavigationState();
 }
@@ -37,7 +41,7 @@ class _AgentNavigationState extends State<AgentNavigation> {
     }
 
     RemoteMessage? initialMessage =
-    await FirebaseMessaging.instance.getInitialMessage();
+        await FirebaseMessaging.instance.getInitialMessage();
 
     if (initialMessage != null) {
       navigate();
@@ -56,33 +60,55 @@ class _AgentNavigationState extends State<AgentNavigation> {
 
   @override
   Widget build(BuildContext context) {
-    return Scaffold(
-      body: Stack(
-        children: [
-          Offstage(
-            offstage: _view != 0,
-            child: const DashboardScreen(),
-          ),
-          Offstage(
-            offstage: _view != 1,
-            child: const NotificationScreen(),
-          ),
-          Offstage(
-            offstage: _view != 2,
-            child: const AccountScreen(),
-          )
-        ],
-      ),
-      bottomNavigationBar: NavigationBar(
-        selectedIndex: _view,
-        labelBehavior: NavigationDestinationLabelBehavior.onlyShowSelected,
-        destinations: AgentNavigation.items,
-        onDestinationSelected: (index) {
-          setState(() {
-            _view = index;
-          });
-        },
-      ),
+    final isLargeScreen = MediaQuery.of(context).size.width > 640;
+
+    final content = Stack(
+      children: [
+        Offstage(
+          offstage: _view != 0,
+          child: const DashboardScreen(),
+        ),
+        Offstage(
+          offstage: _view != 1,
+          child: const NotificationScreen(),
+        ),
+        Offstage(
+          offstage: _view != 2,
+          child: const AccountScreen(),
+        )
+      ],
     );
+
+    if (isLargeScreen) {
+      return Row(children: <Widget>[
+        NavigationRail(
+          selectedIndex: _view,
+          groupAlignment: 0,
+          onDestinationSelected: (int index) {
+            setState(() {
+              _view = index;
+            });
+          },
+          labelType: NavigationRailLabelType.all,
+          destinations: widget.railDestinations,
+        ),
+        const VerticalDivider(thickness: 1, width: 1),
+        Expanded(child: content),
+      ]);
+    } else {
+      return Scaffold(
+        body: content,
+        bottomNavigationBar: BottomNavigationBar(
+          currentIndex: _view,
+          showUnselectedLabels: false,
+          items: widget.bottomDestinations,
+          onTap: (index) {
+            setState(() {
+              _view = index;
+            });
+          },
+        ),
+      );
+    }
   }
 }

lib/main.dart

@@ -1,11 +1,6 @@
 import 'package:flutter/material.dart';
-import 'package:go_router/go_router.dart';
 import 'package:goatagent/auth.dart';
 import 'package:goatagent/firebase.dart';
-import 'package:goatagent/screens/about.dart';
-import 'package:goatagent/screens/account.dart';
-import 'package:goatagent/screens/dashboard.dart';
-import 'package:goatagent/screens/notifications.dart';
 
 import 'layouts/navigation.dart';
 
@@ -50,7 +45,7 @@ class GoatAgent extends StatelessWidget {
         ),
         useMaterial3: true,
       ),
-      home: const AgentNavigation(),
+      home: AgentNavigation(),
     );
   }
 }