Adjust menu navigation

lib/constants.dart

@@ -104,7 +104,8 @@ const kProductPlans = [
 
 const double kMobileLayoutWidth = 700;
 const double kMobileDialogPadding = 12;
-const double kDrawerWidth = 272;
+const double kDrawerWidthMobile = 272;
+const double kDrawerWidthDesktop = 220;
 const double kTableColumnGap = 16;
 const double kTopBottomBarHeight = 50;
 const double kDialogWidth = 400;

lib/ui/app/history_drawer.dart

@@ -49,7 +49,7 @@ class HistoryDrawer extends StatelessWidget {
     }
 
     return SizedBox(
-      width: kDrawerWidth,
+      width: kDrawerWidthMobile,
       child: Drawer(
         child: Scaffold(
           appBar: AppBar(

lib/ui/app/menu_drawer.dart

@@ -255,7 +255,11 @@ class MenuDrawer extends StatelessWidget {
 
     return FocusTraversalGroup(
       child: Container(
-        width: state.isMenuCollapsed ? 65 : kDrawerWidth,
+        width: state.isMenuCollapsed
+            ? 65
+            : isDesktop(context)
+                ? kDrawerWidthDesktop
+                : kDrawerWidthMobile,
         child: Drawer(
           child: SafeArea(
             child: Column(
@@ -565,7 +569,7 @@ class DrawerTile extends StatefulWidget {
 }
 
 class _DrawerTileState extends State<DrawerTile> {
-  //bool _isHovered = false;
+  bool _isHovered = false;
 
   @override
   Widget build(BuildContext context) {
@@ -643,10 +647,44 @@ class _DrawerTileState extends State<DrawerTile> {
       }
     }
 
-    Widget trailingWidget;
+    final onTap = () {
-    if (!state.isMenuCollapsed) {
+      if (widget.entityType != null) {
+        viewEntitiesByType(
+          entityType: widget.entityType,
+        );
+      } else {
+        widget.onTap();
+      }
+    };
+
+    final onLongPress = () {
+      if (widget.onLongPress != null) {
+        widget.onLongPress();
+      } else if (widget.entityType != null) {
+        createEntityByType(
+          context: context,
+          entityType: widget.entityType,
+          applyFilter: false,
+        );
+      }
+    };
+
+    if (state.isMenuCollapsed) {
+      return InkWell(
+          onTap: onTap,
+          onLongPress: onLongPress,
+          child: SizedBox(
+            height: 40,
+            child: Icon(
+              widget.icon,
+              color: textColor,
+            ),
+          ));
+    }
+
+    Widget iconWidget;
     if (widget.title == localization.dashboard) {
-        trailingWidget = IconButton(
+      iconWidget = IconButton(
         icon: Icon(
           Icons.search,
           color: textColor,
@@ -662,7 +700,7 @@ class _DrawerTileState extends State<DrawerTile> {
         },
       );
     } else if (userCompany.canCreate(widget.entityType)) {
-        trailingWidget = IconButton(
+      iconWidget = IconButton(
         tooltip: prefState.enableTooltips ? widget.iconTooltip : null,
         icon: Icon(
           Icons.add_circle_outline,
@@ -680,7 +718,6 @@ class _DrawerTileState extends State<DrawerTile> {
         },
       );
     }
-    }
 
     bool isLoading = false;
     if (widget.entityType != null &&
@@ -695,23 +732,20 @@ class _DrawerTileState extends State<DrawerTile> {
         opacity: isSelected ? 1 : .8,
         child: ListTile(
           dense: true,
-          leading: Padding(
+          leading: _isHovered && isDesktop(context) && iconWidget != null
-            padding: const EdgeInsets.only(left: 4),
+              ? iconWidget
-            child: isLoading
+              : isLoading
                   ? SizedBox(
                       child: CircularProgressIndicator(),
                       width: 22,
                       height: 22,
                     )
-                : Icon(
+                  : IconButton(
-                    widget.icon,
+                      icon: Icon(widget.icon),
-                    size: 22,
                       color: textColor,
+                      onPressed: onTap,
                     ),
-          ),
+          title: Text(
-          title: state.isMenuCollapsed
-              ? SizedBox()
-              : Text(
             widget.title,
             key: ValueKey('menu_${widget.title}'),
             style: Theme.of(context).textTheme.bodyText1.copyWith(
@@ -719,32 +753,9 @@ class _DrawerTileState extends State<DrawerTile> {
                   color: textColor,
                 ),
           ),
-          onTap: () {
+          onTap: onTap,
-            if (widget.entityType != null) {
+          onLongPress: onLongPress,
-              viewEntitiesByType(
+          trailing: isMobile(context) ? iconWidget : null,
-                entityType: widget.entityType,
-              );
-            } else {
-              widget.onTap();
-            }
-          },
-          onLongPress: () => widget.onLongPress != null
-              ? widget.onLongPress()
-              : widget.entityType != null
-                  ? createEntityByType(
-                      context: context,
-                      entityType: widget.entityType,
-                      applyFilter: false,
-                    )
-                  : null,
-          /*
-              trailing: _isHovered ||
-                      !RendererBinding.instance.mouseTracker.mouseIsConnected
-                  ? trailingWidget
-                  : null,
-
-               */
-          trailing: state.isMenuCollapsed ? null : trailingWidget,
         ),
       ),
     );
@@ -757,8 +768,8 @@ class _DrawerTileState extends State<DrawerTile> {
     }
 
     return MouseRegion(
-      //onEnter: (event) => setState(() => _isHovered = true),
+      onEnter: (event) => setState(() => _isHovered = true),
-      //onExit: (event) => setState(() => _isHovered = false),
+      onExit: (event) => setState(() => _isHovered = false),
       child: child,
     );
   }