Added navigation rail

lib/base.dart

@@ -12,6 +12,7 @@ import 'package:flutter/services.dart';
 
 import 'package:adguard_home_manager/widgets/bottom_nav_bar.dart';
 import 'package:adguard_home_manager/widgets/update_modal.dart';
+import 'package:adguard_home_manager/widgets/navigation_rail.dart';
 
 import 'package:adguard_home_manager/providers/app_config_provider.dart';
 import 'package:adguard_home_manager/models/github_release.dart';
@@ -110,6 +111,8 @@ class _BaseState extends State<Base> with WidgetsBindingObserver {
     final serversProvider = Provider.of<ServersProvider>(context);
     final appConfigProvider = Provider.of<AppConfigProvider>(context);
 
+    final width = MediaQuery.of(context).size.width;
+
     List<AppScreen> screens = serversProvider.selectedServer != null
       ? screensServerConnected 
       : screensSelectServer;
@@ -129,18 +132,27 @@ class _BaseState extends State<Base> with WidgetsBindingObserver {
           : Brightness.light,
       ),
       child: Scaffold(
-        body: PageTransitionSwitcher(
-          duration: const Duration(milliseconds: 200),
-          transitionBuilder: (
-            (child, primaryAnimation, secondaryAnimation) => FadeThroughTransition(
-              animation: primaryAnimation, 
-              secondaryAnimation: secondaryAnimation,
-              child: child,
-            )
-          ),
-          child: screens[appConfigProvider.selectedScreen].body,
+        body: Row(
+          children: [
+            if (width > 900) const SideNavigationRail(),
+              Expanded(
+                child: PageTransitionSwitcher(
+                  duration: const Duration(milliseconds: 200),
+                  transitionBuilder: (
+                    (child, primaryAnimation, secondaryAnimation) => FadeThroughTransition(
+                      animation: primaryAnimation, 
+                      secondaryAnimation: secondaryAnimation,
+                      child: child,
+                    )
+                  ),
+                  child: screens[appConfigProvider.selectedScreen].body,
+                ),
+              ),
+          ],
         ),
-        bottomNavigationBar: const BottomNavBar(),
+        bottomNavigationBar: width <= 900 
+          ? const BottomNavBar()
+          : null,
       )
     );
   }

lib/widgets/navigation_rail.dart

@@ -0,0 +1,67 @@
+import 'package:flutter/material.dart';
+import 'package:provider/provider.dart';
+import 'package:flutter_gen/gen_l10n/app_localizations.dart';
+
+import 'package:adguard_home_manager/config/app_screens.dart';
+import 'package:adguard_home_manager/models/app_screen.dart';
+import 'package:adguard_home_manager/providers/app_config_provider.dart';
+import 'package:adguard_home_manager/providers/servers_provider.dart';
+
+class SideNavigationRail extends StatelessWidget {
+  const SideNavigationRail({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    final serversProvider = Provider.of<ServersProvider>(context);
+    final appConfigProvider = Provider.of<AppConfigProvider>(context);
+
+    List<AppScreen> screens = serversProvider.selectedServer != null
+      ? screensServerConnected 
+      : screensSelectServer;
+
+    String translatedName(String key) {
+      switch (key) {
+        case 'home':
+          return AppLocalizations.of(context)!.home;
+
+        case 'settings':
+          return AppLocalizations.of(context)!.settings;
+
+        case 'connect':
+          return AppLocalizations.of(context)!.connect;
+
+        case 'clients':
+          return AppLocalizations.of(context)!.clients;
+
+        case 'logs':
+          return AppLocalizations.of(context)!.logs;
+
+        case 'filters':
+          return AppLocalizations.of(context)!.filters;
+
+        default:
+          return '';
+      }
+    }
+
+    return NavigationRail(
+      selectedIndex: appConfigProvider.selectedScreen,
+      destinations: screens.map((screen) => NavigationRailDestination(
+        icon: Icon(
+          screen.icon,
+          color: screens[appConfigProvider.selectedScreen] == screen
+            ? Theme.of(context).colorScheme.onSecondaryContainer
+            : Theme.of(context).colorScheme.onSurfaceVariant,
+        ), 
+        label: Text(translatedName(screen.name))
+      )).toList(),
+      onDestinationSelected: (value) {
+        appConfigProvider.setSelectedScreen(value);
+      },
+      labelType: NavigationRailLabelType.all,
+      useIndicator: true,
+      groupAlignment: 0,
+      backgroundColor: Theme.of(context).colorScheme.primary.withOpacity(0.05),
+    );
+  }
+}