♻️ Refactored nav completely

assets/translations/en-US.json

@@ -887,5 +887,7 @@
   "postTotalCount": {
     "one": "Total {} post",
     "other": "Total {} posts"
-  }
+  },
+  "settingsHideBottomNav": "Hide Bottom Navigation",
+  "settingsHideBottomNavDescription": "Hide the bottom navigation bar, and show the navigation buttons in the drawer."
 }

assets/translations/zh-CN.json

@@ -885,5 +885,7 @@
   "postTotalCount": {
     "zero": "没有帖子",
     "one": "共 {} 条帖子"
-  }
+  },
+  "settingsHideBottomNav": "隐藏底部导航栏",
+  "settingsHideBottomNavDescription": "隐藏底部导航栏，在侧边栏抽屉显示导航按钮。"
 }

assets/translations/zh-HK.json

@@ -879,5 +879,13 @@
   "appInitUserDirectory": "正在初始化用户目錄",
   "appInitRealm": "正在初始化領域信息",
   "appInitChat": "正在初始化聊天",
-  "appInitDone": "完成"
+  "appInitDone": "完成",
+  "community": "社區",
+  "realmCommunity": "{}的社區",
+  "postTotalCount": {
+    "zero": "沒有帖子",
+    "one": "共 {} 條帖子"
+  },
+  "settingsHideBottomNav": "隱藏底部導航欄",
+  "settingsHideBottomNavDescription": "隱藏底部導航欄，在側邊欄抽屜顯示導航按鈕。"
 }

assets/translations/zh-TW.json

@@ -879,5 +879,13 @@
   "appInitUserDirectory": "正在初始化用戶目錄",
   "appInitRealm": "正在初始化領域信息",
   "appInitChat": "正在初始化聊天",
-  "appInitDone": "完成"
+  "appInitDone": "完成",
+  "community": "社區",
+  "realmCommunity": "{}的社區",
+  "postTotalCount": {
+    "zero": "沒有帖子",
+    "one": "共 {} 條帖子"
+  },
+  "settingsHideBottomNav": "隱藏底部導航欄",
+  "settingsHideBottomNavDescription": "隱藏底部導航欄，在側邊欄抽屜顯示導航按鈕。"
 }

lib/providers/config.dart

@@ -21,6 +21,7 @@ const kAppRealmCompactView = 'app_realm_compact_view';
 const kAppCustomFonts = 'app_custom_fonts';
 const kAppMixedFeed = 'app_mixed_feed';
 const kAppAutoTranslate = 'app_auto_translate';
+const kAppHideBottomNav = 'app_hide_bottom_nav';
 
 const Map<String, FilterQuality> kImageQualityLevel = {
   'settingsImageQualityLowest': FilterQuality.none,
@@ -91,6 +92,15 @@ class ConfigProvider extends ChangeNotifier {
     return prefs.getBool(kAppAutoTranslate) ?? false;
   }
 
+  bool get hideBottomNav {
+    return prefs.getBool(kAppHideBottomNav) ?? false;
+  }
+
+  set hideBottomNav(bool value) {
+    prefs.setBool(kAppHideBottomNav, value);
+    notifyListeners();
+  }
+
   set autoTranslate(bool value) {
     prefs.setBool(kAppAutoTranslate, value);
     notifyListeners();

lib/providers/navigation.dart

@@ -25,13 +25,10 @@ class NavigationProvider extends ChangeNotifier {
 
   int? get currentIndex => _currentIndex;
 
-  static const List<String> kShowBottomNavScreen = [
+  List<String> get showBottomNavScreen => destinations
-    'home',
+      .where((ele) => ele.isPinned)
-    'explore',
+      .map((ele) => ele.screen)
-    'account',
+      .toList();
-    'album',
-    'chat',
-  ];
 
   static const List<AppNavDestination> kAllDestination = [
     AppNavDestination(

lib/screens/settings.dart

@@ -336,6 +336,19 @@ class _SettingsScreenState extends State<SettingsScreen> {
                     setState(() {});
                   },
                 ),
+                CheckboxListTile(
+                  secondary: const Icon(Symbols.hide),
+                  title: Text('settingsHideBottomNav').tr(),
+                  subtitle: Text('settingsHideBottomNavDescription').tr(),
+                  contentPadding: const EdgeInsets.only(left: 24, right: 17),
+                  value: _prefs.getBool(kAppHideBottomNav) ?? false,
+                  onChanged: (value) {
+                    _prefs.setBool(kAppHideBottomNav, value ?? false);
+                    final cfg = context.read<ConfigProvider>();
+                    cfg.calcDrawerSize(context);
+                    setState(() {});
+                  },
+                ),
                 ListTile(
                   leading: const Icon(Symbols.font_download),
                   title: Text('settingsCustomFonts').tr(),

lib/widgets/navigation/app_bottom_navigation.dart

@@ -37,17 +37,15 @@ class _AppBottomNavigationBarState extends State<AppBottomNavigationBar> {
           ...nav.destinations.where((ele) => ele.isPinned),
         ];
 
-        return BottomNavigationBar(
+        return NavigationBar(
-          currentIndex: nav.getIndexInRange(0, nav.pinnedDestinationCount),
+          selectedIndex: nav.getIndexInRange(0, nav.pinnedDestinationCount),
-          type: BottomNavigationBarType.fixed,
+          destinations: destinations.map((ele) {
-          showUnselectedLabels: false,
+            return NavigationDestination(
-          items: destinations.map((ele) {
-            return BottomNavigationBarItem(
               icon: ele.icon,
               label: ele.label.tr(),
             );
           }).toList(),
-          onTap: (idx) {
+          onDestinationSelected: (idx) {
             nav.setIndex(idx);
             GoRouter.of(context).goNamed(destinations[idx].screen);
           },

lib/widgets/navigation/app_drawer_navigation.dart

@@ -78,27 +78,29 @@ class _AppNavigationDrawerState extends State<AppNavigationDrawer> {
               Expanded(
                 child: _DrawerContentList(),
               ),
-              Row(
+              if (cfg.hideBottomNav)
-                spacing: 8,
+                Row(
-                children: nav.destinations.where((ele) => ele.isPinned).map(
+                  spacing: 8,
-                  (ele) {
+                  children: nav.destinations.where((ele) => ele.isPinned).map(
-                    return Expanded(
+                    (ele) {
-                      child: Tooltip(
+                      return Expanded(
-                        message: ele.label.tr(),
+                        child: Tooltip(
-                        child: IconButton.filledTonal(
+                          message: ele.label.tr(),
-                          icon: ele.icon,
+                          child: IconButton.filledTonal(
-                          color:
+                            icon: ele.icon,
-                              Theme.of(context).colorScheme.onPrimaryContainer,
+                            color: Theme.of(context)
-                          onPressed: () {
+                                .colorScheme
-                            GoRouter.of(context).goNamed(ele.screen);
+                                .onPrimaryContainer,
-                            Scaffold.of(context).closeDrawer();
+                            onPressed: () {
-                          },
+                              GoRouter.of(context).goNamed(ele.screen);
+                              Scaffold.of(context).closeDrawer();
+                            },
+                          ),
                         ),
-                      ),
+                      );
-                    );
+                    },
-                  },
+                  ).toList(),
-                ).toList(),
+                ).padding(horizontal: 16),
-              ).padding(horizontal: 16),
               Align(
                 alignment: Alignment.bottomCenter,
                 child: ListTile(

lib/widgets/navigation/app_scaffold.dart

@@ -12,6 +12,7 @@ import 'package:surface/providers/config.dart';
 import 'package:surface/providers/navigation.dart';
 import 'package:surface/widgets/connection_indicator.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';
 import 'package:surface/widgets/navigation/app_rail_navigation.dart';
 import 'package:surface/widgets/notify_indicator.dart';
@@ -106,6 +107,7 @@ class AppRootScaffold extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final cfg = context.watch<ConfigProvider>();
+    final nav = context.watch<NavigationProvider>();
     final devicePixelRatio = MediaQuery.of(context).devicePixelRatio;
 
     final isCollapseDrawer = cfg.drawerIsCollapsed;
@@ -117,6 +119,11 @@ class AppRootScaffold extends StatelessWidget {
         .last
         .route
         .name;
+    final isShowBottomNavigation = cfg.hideBottomNav
+        ? false
+        : nav.showBottomNavScreen.contains(routeName)
+            ? ResponsiveBreakpoints.of(context).smallerOrEqualTo(MOBILE)
+            : false;
     final isPopable = !NavigationProvider.kAllDestination
         .map((ele) => ele.screen)
         .contains(routeName);
@@ -227,6 +234,8 @@ class AppRootScaffold extends StatelessWidget {
       ),
       drawer: !isExpandedDrawer ? AppNavigationDrawer() : null,
       drawerEdgeDragWidth: isPopable ? 0 : null,
+      bottomNavigationBar:
+          isShowBottomNavigation ? AppBottomNavigationBar() : null,
     );
   }
 }