⏪ Rollback drawer style on mobile

🗑️ Remove drawer prefer collapse & expand

lib/widgets/connection_indicator.dart

@@ -16,12 +16,7 @@ class ConnectionIndicator extends StatelessWidget {
     final ws = context.watch<WebSocketProvider>();
     final cfg = context.watch<ConfigProvider>();
 
-    final marginLeft =
-        cfg.drawerIsCollapsed
-            ? 0.0
-            : cfg.drawerIsExpanded
-            ? 304.0
-            : 80.0;
+    final marginLeft = cfg.drawerIsCollapsed ? 0.0 : 80.0;
 
     return ListenableBuilder(
       listenable: ws,
@@ -35,41 +30,52 @@ class ConnectionIndicator extends StatelessWidget {
             child: GestureDetector(
               child: Material(
                 elevation: 2,
-                shape: const RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(16))),
+                shape: const RoundedRectangleBorder(
+                    borderRadius: BorderRadius.all(Radius.circular(16))),
                 color: Theme.of(context).colorScheme.secondaryContainer,
-                child:
-                    ua.isAuthorized
-                        ? Row(
-                          mainAxisSize: MainAxisSize.min,
-                          mainAxisAlignment: MainAxisAlignment.center,
-                          crossAxisAlignment: CrossAxisAlignment.center,
-                          children: [
-                            if (ws.isBusy)
-                              Text(
-                                'serverConnecting',
-                              ).tr().textColor(Theme.of(context).colorScheme.onSecondaryContainer)
-                            else if (!ws.isConnected)
-                              Text(
-                                'serverDisconnected',
-                              ).tr().textColor(Theme.of(context).colorScheme.onSecondaryContainer)
-                            else
-                              Text(
-                                'serverConnected',
-                              ).tr().textColor(Theme.of(context).colorScheme.onSecondaryContainer),
-                            const Gap(8),
-                            if (ws.isBusy)
-                              const CircularProgressIndicator(
-                                strokeWidth: 2.5,
-                                padding: EdgeInsets.zero,
-                              ).width(12).height(12).padding(horizontal: 4, right: 4)
-                            else if (!ws.isConnected)
-                              const Icon(Symbols.power_off, size: 18)
-                            else
-                              const Icon(Symbols.power, size: 18),
-                          ],
-                        ).padding(horizontal: 8, vertical: 4)
-                        : const SizedBox.shrink(),
-              ).opacity(show ? 1 : 0, animate: true).animate(const Duration(milliseconds: 300), Curves.easeInOut),
+                child: ua.isAuthorized
+                    ? Row(
+                        mainAxisSize: MainAxisSize.min,
+                        mainAxisAlignment: MainAxisAlignment.center,
+                        crossAxisAlignment: CrossAxisAlignment.center,
+                        children: [
+                          if (ws.isBusy)
+                            Text(
+                              'serverConnecting',
+                            ).tr().textColor(Theme.of(context)
+                                .colorScheme
+                                .onSecondaryContainer)
+                          else if (!ws.isConnected)
+                            Text(
+                              'serverDisconnected',
+                            ).tr().textColor(Theme.of(context)
+                                .colorScheme
+                                .onSecondaryContainer)
+                          else
+                            Text(
+                              'serverConnected',
+                            ).tr().textColor(Theme.of(context)
+                                .colorScheme
+                                .onSecondaryContainer),
+                          const Gap(8),
+                          if (ws.isBusy)
+                            const CircularProgressIndicator(
+                              strokeWidth: 2.5,
+                              padding: EdgeInsets.zero,
+                            )
+                                .width(12)
+                                .height(12)
+                                .padding(horizontal: 4, right: 4)
+                          else if (!ws.isConnected)
+                            const Icon(Symbols.power_off, size: 18)
+                          else
+                            const Icon(Symbols.power, size: 18),
+                        ],
+                      ).padding(horizontal: 8, vertical: 4)
+                    : const SizedBox.shrink(),
+              )
+                  .opacity(show ? 1 : 0, animate: true)
+                  .animate(const Duration(milliseconds: 300), Curves.easeInOut),
               onTap: () {
                 if (!ws.isConnected && !ws.isBusy) {
                   ws.connect();

lib/widgets/context_menu.dart

@@ -26,9 +26,7 @@ class ContextMenuArea extends StatelessWidget {
         final cfg = context.read<ConfigProvider>();
         if (!cfg.drawerIsCollapsed) {
           // Leave padding for side navigation
-          mousePosition = cfg.drawerIsExpanded
-              ? mousePosition.copyWith(dx: mousePosition.dx - 304 * 2)
-              : mousePosition.copyWith(dx: mousePosition.dx - 80 * 2);
+          mousePosition = mousePosition.copyWith(dx: mousePosition.dx - 80 * 2);
         }
       },
       child: GestureDetector(
@@ -40,7 +38,8 @@ class ContextMenuArea extends StatelessWidget {
   }
 
   void _showMenu(BuildContext context, Offset mousePosition) async {
-    final menu = contextMenu.copyWith(position: contextMenu.position ?? mousePosition);
+    final menu =
+        contextMenu.copyWith(position: contextMenu.position ?? mousePosition);
     final value = await showContextMenu(context, contextMenu: menu);
     onItemSelected?.call(value);
   }

lib/widgets/navigation/app_drawer_navigation.dart

@@ -12,7 +12,6 @@ import 'package:material_symbols_icons/symbols.dart';
 import 'package:provider/provider.dart';
 import 'package:styled_widget/styled_widget.dart';
 import 'package:surface/providers/channel.dart';
-import 'package:surface/providers/config.dart';
 import 'package:surface/providers/navigation.dart';
 import 'package:surface/providers/sn_network.dart';
 import 'package:surface/providers/sn_realm.dart';
@@ -45,27 +44,18 @@ class _AppNavigationDrawerState extends State<AppNavigationDrawer> {
   Widget build(BuildContext context) {
     final ua = context.read<UserProvider>();
     final nav = context.watch<NavigationProvider>();
-    final cfg = context.watch<ConfigProvider>();
-
-    final backgroundColor = cfg.drawerIsExpanded ? Colors.transparent : null;
 
     return ListenableBuilder(
       listenable: nav,
       builder: (context, _) {
         return Drawer(
           elevation: widget.elevation,
-          backgroundColor: backgroundColor,
-          shape: const RoundedRectangleBorder(
-              borderRadius: BorderRadius.all(Radius.circular(0))),
           child: Column(
             mainAxisSize: MainAxisSize.max,
             crossAxisAlignment: CrossAxisAlignment.start,
             children: [
               if (!kIsWeb &&
-                  (Platform.isWindows ||
-                      Platform.isLinux ||
-                      Platform.isMacOS) &&
-                  !cfg.drawerIsExpanded)
+                  (Platform.isWindows || Platform.isLinux || Platform.isMacOS))
                 Container(
                   decoration: BoxDecoration(
                     border: Border(
@@ -78,42 +68,36 @@ class _AppNavigationDrawerState extends State<AppNavigationDrawer> {
                   child: WindowTitleBarBox(),
                 ),
               Gap(MediaQuery.of(context).padding.top),
-              Expanded(
-                child: _DrawerContentList(),
+              Column(
+                mainAxisSize: MainAxisSize.min,
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  Text('Solar Network').bold(),
+                  AppVersionLabel(),
+                ],
+              ).padding(
+                horizontal: 32,
+                vertical: 12,
+              ),
+              Expanded(
+                child: ListView(
+                  padding: EdgeInsets.zero,
+                  children: [
+                    ...nav.destinations.mapIndexed((idx, ele) {
+                      return ListTile(
+                        leading: ele.icon,
+                        title: Text(ele.label).tr(),
+                        contentPadding: EdgeInsets.symmetric(horizontal: 24),
+                        selected: nav.currentIndex == idx,
+                        onTap: () {
+                          GoRouter.of(context).pushNamed(ele.screen);
+                          nav.setIndex(idx);
+                        },
+                      );
+                    })
+                  ],
+                ),
               ),
-              Row(
-                spacing: 8,
-                children:
-                    nav.destinations.where((ele) => ele.isPinned).mapIndexed(
-                  (idx, ele) {
-                    return Expanded(
-                      child: Tooltip(
-                        message: ele.label.tr(),
-                        child: IconButton(
-                          icon: ele.icon,
-                          color: nav.currentIndex == idx
-                              ? Theme.of(context).colorScheme.onPrimaryContainer
-                              : Theme.of(context).colorScheme.onSurface,
-                          style: ButtonStyle(
-                            backgroundColor: WidgetStatePropertyAll(
-                              nav.currentIndex == idx
-                                  ? Theme.of(context)
-                                      .colorScheme
-                                      .primaryContainer
-                                  : Colors.transparent,
-                            ),
-                          ),
-                          onPressed: () {
-                            GoRouter.of(context).goNamed(ele.screen);
-                            Scaffold.of(context).closeDrawer();
-                            nav.setIndex(idx);
-                          },
-                        ),
-                      ),
-                    );
-                  },
-                ).toList(),
-              ).padding(horizontal: 16, bottom: 8),
               Align(
                 alignment: Alignment.bottomCenter,
                 child: ListTile(

lib/widgets/navigation/app_scaffold.dart

@@ -13,6 +13,7 @@ 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';
 
@@ -221,6 +222,7 @@ class AppRootScaffold extends StatelessWidget {
         ],
       ),
       drawerEdgeDragWidth: isPopable ? 0 : null,
+      drawer: isCollapseDrawer ? const AppNavigationDrawer() : null,
       bottomNavigationBar:
           isShowBottomNavigation ? AppBottomNavigationBar() : null,
     );