✨ 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(
+    {'label': 'Dashboard', 'icon': Icon(Icons.home)},
-      icon: Icon(Icons.home),
+    {'label': 'Notifications', 'icon': Icon(Icons.notifications)},
-      label: 'Dashboard',
+    {'label': 'Account', 'icon': Icon(Icons.account_circle)},
-    ),
-    NavigationDestination(
-      icon: Icon(Icons.notifications),
-      label: 'Notifications',
-    ),
-    NavigationDestination(
-      icon: Icon(Icons.account_circle),
-      label: 'Account',
-    )
   ];
 
+  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();
 }
@@ -56,8 +60,9 @@ class _AgentNavigationState extends State<AgentNavigation> {
 
   @override
   Widget build(BuildContext context) {
-    return Scaffold(
+    final isLargeScreen = MediaQuery.of(context).size.width > 640;
-      body: Stack(
+
+    final content = Stack(
       children: [
         Offstage(
           offstage: _view != 0,
@@ -72,12 +77,32 @@ class _AgentNavigationState extends State<AgentNavigation> {
           child: const AccountScreen(),
         )
       ],
-      ),
+    );
-      bottomNavigationBar: NavigationBar(
+
+    if (isLargeScreen) {
+      return Row(children: <Widget>[
+        NavigationRail(
           selectedIndex: _view,
-        labelBehavior: NavigationDestinationLabelBehavior.onlyShowSelected,
+          groupAlignment: 0,
-        destinations: AgentNavigation.items,
+          onDestinationSelected: (int index) {
-        onDestinationSelected: (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;
             });
@@ -86,3 +111,4 @@ class _AgentNavigationState extends State<AgentNavigation> {
       );
     }
   }
+}

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(),
     );
   }
 }