From 4e0b9c87e275b8f878ea060e2b0718ef513706b6 Mon Sep 17 00:00:00 2001
From: Poly-Pixel <79737178+Poly-Pixel@users.noreply.github.com>
Date: Wed, 21 Sep 2022 08:06:48 -0400
Subject: [PATCH] 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
---
 .../presentation/home/home_layout.dart        |  6 +++--
 .../presentation/home/home_screen.dart        | 25 +++++++++----------
 2 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/frontend/app_flowy/lib/workspace/presentation/home/home_layout.dart b/frontend/app_flowy/lib/workspace/presentation/home/home_layout.dart
index 5194b9edb7..9a3d5636ab 100644
--- a/frontend/app_flowy/lib/workspace/presentation/home/home_layout.dart
+++ b/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;
diff --git a/frontend/app_flowy/lib/workspace/presentation/home/home_screen.dart b/frontend/app_flowy/lib/workspace/presentation/home/home_screen.dart
index aac9f214bc..ca5023c30d 100644
--- a/frontend/app_flowy/lib/workspace/presentation/home/home_screen.dart
+++ b/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),
       ],
     );
   }