feat: show menu as overlapping drawer on small screens (#1088)

* feat: show menu as overlapping drawer on small screens

* refactor: simplify home page left offset ternary expression

Author: polypixeldev

frontend/app_flowy/lib/workspace/presentation/home/home_layout.dart

@@ -13,6 +13,7 @@ import 'home_sizes.dart';
 class HomeLayout {
   late double menuWidth;
   late bool showMenu;
+  late bool menuIsDrawer;
   late bool showEditPanel;
   late double editPanelWidth;
   late double homePageLOffset;
@@ -36,10 +37,11 @@ class HomeLayout {
     if (forceCollapse) {
       showMenu = false;
     } else {
-      showMenu = context.widthPx > PageBreaks.tabletPortrait;
+      showMenu = true;
+      menuIsDrawer = context.widthPx <= PageBreaks.tabletPortrait;
     }
 
-    homePageLOffset = showMenu ? menuWidth : 0.0;
+    homePageLOffset = (showMenu && !menuIsDrawer) ? menuWidth : 0.0;
 
     menuSpacing = !showMenu && Platform.isMacOS ? 80.0 : 0.0;
     animDuration = .35.seconds;

frontend/app_flowy/lib/workspace/presentation/home/home_screen.dart

@@ -148,7 +148,6 @@ class _HomeScreenState extends State<HomeScreen> {
     return FocusTraversalGroup(child: RepaintBoundary(child: homeMenu));
   }
 
-
   Widget _buildEditPanel(
       {required HomeState homeState,
       required BuildContext context,
@@ -204,18 +203,6 @@ class _HomeScreenState extends State<HomeScreen> {
   }) {
     return Stack(
       children: [
-        homeMenu
-            .animatedPanelX(
-              closeX: -layout.menuWidth,
-              isClosed: !layout.showMenu,
-            )
-            .positioned(
-                left: 0,
-                top: 0,
-                width: layout.menuWidth,
-                bottom: 0,
-                animate: true)
-            .animate(layout.animDuration, Curves.easeOut),
         homeStack
             .constrained(minWidth: 500)
             .positioned(
@@ -241,6 +228,18 @@ class _HomeScreenState extends State<HomeScreen> {
             )
             .positioned(
                 right: 0, top: 0, bottom: 0, width: layout.editPanelWidth),
+        homeMenu
+            .animatedPanelX(
+              closeX: -layout.menuWidth,
+              isClosed: !layout.showMenu,
+            )
+            .positioned(
+                left: 0,
+                top: 0,
+                width: layout.menuWidth,
+                bottom: 0,
+                animate: true)
+            .animate(layout.animDuration, Curves.easeOut),
       ],
     );
   }