📱 New layout for the landscape device

lib/widgets/navigation/app_navigation.dart

@@ -6,7 +6,7 @@ abstract class AppNavigation {
   static List<AppNavigationDestination> destinations = [
     AppNavigationDestination(
       icon: const Icon(Icons.dashboard),
-      label: 'dashboard'.tr,
+      label: 'dashboardNav'.tr,
       page: 'dashboard',
     ),
     AppNavigationDestination(
@@ -26,7 +26,7 @@ abstract class AppNavigation {
     ),
     AppNavigationDestination(
       icon: const AppAccountWidget(),
-      label: 'account'.tr,
+      label: 'accountNav'.tr,
       page: 'account',
     ),
   ];

lib/widgets/navigation/app_navigation_bottom.dart

@@ -28,7 +28,7 @@ class _AppNavigationBottomState extends State<AppNavigationBottom> {
       currentIndex: _currentIndex,
       type: BottomNavigationBarType.fixed,
       showUnselectedLabels: false,
-      showSelectedLabels: false,
+      showSelectedLabels: true,
       landscapeLayout: BottomNavigationBarLandscapeLayout.centered,
       items: AppNavigation.destinations
           .map(

lib/widgets/navigation/app_navigation_rail.dart

@@ -0,0 +1,59 @@
+import 'package:flutter/material.dart';
+import 'package:solian/router.dart';
+import 'package:solian/widgets/navigation/app_navigation.dart';
+
+class AppNavigationRail extends StatefulWidget {
+  final int initialIndex;
+
+  const AppNavigationRail({super.key, this.initialIndex = 0});
+
+  @override
+  State<AppNavigationRail> createState() => _AppNavigationRailState();
+}
+
+class _AppNavigationRailState extends State<AppNavigationRail> {
+  int? _currentIndex = 0;
+
+  @override
+  void initState() {
+    super.initState();
+    if (widget.initialIndex >= 0) {
+      _currentIndex = widget.initialIndex;
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return NavigationRail(
+      selectedIndex: _currentIndex,
+      labelType: NavigationRailLabelType.selected,
+      groupAlignment: -1,
+      destinations: AppNavigation.destinations
+          .sublist(0, AppNavigation.destinations.length - 1)
+          .map(
+            (x) => NavigationRailDestination(
+              icon: x.icon,
+              label: Text(x.label),
+            ),
+          )
+          .toList(),
+      trailing: Expanded(
+        child: Align(
+          alignment: Alignment.bottomCenter,
+          child: IconButton(
+            icon: AppNavigation.destinations.last.icon,
+            tooltip: AppNavigation.destinations.last.label,
+            onPressed: () {
+              setState(() => _currentIndex = null);
+              AppRouter.instance.goNamed(AppNavigation.destinations.last.page);
+            },
+          ),
+        ),
+      ),
+      onDestinationSelected: (idx) {
+        setState(() => _currentIndex = idx);
+        AppRouter.instance.goNamed(AppNavigation.destinations[idx].page);
+      },
+    );
+  }
+}

lib/widgets/navigation/realm_switcher.dart

@@ -1,3 +1,5 @@
+import 'dart:math';
+
 import 'package:dropdown_button2/dropdown_button2.dart';
 import 'package:flutter/material.dart';
 import 'package:gap/gap.dart';
@@ -18,9 +20,10 @@ class RealmSwitcher extends StatelessWidget {
     return Obx(() {
       return DropdownButtonHideUnderline(
         child: DropdownButton2<Realm?>(
+          iconStyleData: const IconStyleData(iconSize: 0),
           isExpanded: true,
           hint: Text(
-            'Select Item',
+            'Realm Region',
             style: TextStyle(
               fontSize: 14,
               color: Theme.of(context).hintColor,
@@ -71,11 +74,11 @@ class RealmSwitcher extends StatelessWidget {
           onChanged: (Realm? value) {
             navState.focusedRealm.value = value;
           },
-          buttonStyleData: const ButtonStyleData(
-            padding: EdgeInsets.symmetric(horizontal: 16),
+          buttonStyleData: ButtonStyleData(
             height: 48,
-            width: 200,
-            decoration: BoxDecoration(
+            width: max(200, MediaQuery.of(context).size.width * 0.4),
+            padding: const EdgeInsets.symmetric(horizontal: 16),
+            decoration: const BoxDecoration(
               borderRadius: BorderRadius.all(Radius.circular(16)),
             ),
           ),