From ccab4d38f824b3281296ad7099a422b23f345697 Mon Sep 17 00:00:00 2001
From: Antoine Dewez <44063631+Zewed@users.noreply.github.com>
Date: Mon, 22 Jul 2024 16:41:30 +0200
Subject: [PATCH] fix(frontend): menu on mobile (#2895)

# Description

Please include a summary of the changes and the related issue. Please
also include relevant motivation and context.

## Checklist before requesting a review

Please delete options that are not relevant.

- [ ] My code follows the style guidelines of this project
- [ ] I have performed a self-review of my code
- [ ] I have commented hard-to-understand areas
- [ ] I have ideally added tests that prove my fix is effective or that
my feature works
- [ ] New and existing unit tests pass locally with my changes
- [ ] Any dependent changes have been merged

## Screenshots (if appropriate):
---
 frontend/app/App.module.scss                  | 31 +++++++++++++++++++
 frontend/app/App.tsx                          | 13 ++++++--
 frontend/lib/components/Menu/Menu.module.scss |  2 +-
 3 files changed, 42 insertions(+), 4 deletions(-)
 create mode 100644 frontend/app/App.module.scss

diff --git a/frontend/app/App.module.scss b/frontend/app/App.module.scss
new file mode 100644
index 000000000..97a5433d2
--- /dev/null
+++ b/frontend/app/App.module.scss
@@ -0,0 +1,31 @@
+@use "styles/ScreenSizes.module.scss";
+@use "styles/ZIndexes.module.scss";
+
+.app_container {
+  display: flex;
+  overflow: auto;
+  position: relative;
+  align-items: stretch;
+  width: 100%;
+  height: 100%;
+
+  @media (max-width: ScreenSizes.$small) {
+    .menu_container {
+      position: absolute;
+      left: 0;
+      top: 0;
+      z-index: ZIndexes.$overlay;
+    }
+  }
+
+  .content_container {
+    overflow: scroll;
+    flex: 1 1 0%;
+
+    @media (max-width: ScreenSizes.$small) {
+      &.blured {
+        opacity: 0.2;
+      }
+    }
+  }
+}
diff --git a/frontend/app/App.tsx b/frontend/app/App.tsx
index fe931a543..e3f3b461b 100644
--- a/frontend/app/App.tsx
+++ b/frontend/app/App.tsx
@@ -17,6 +17,7 @@ import {
 import { useBrainContext } from "@/lib/context/BrainProvider/hooks/useBrainContext";
 import { ChatsProvider } from "@/lib/context/ChatsProvider";
 import { MenuProvider } from "@/lib/context/MenuProvider/Menu-provider";
+import { useMenuContext } from "@/lib/context/MenuProvider/hooks/useMenuContext";
 import { NotificationsProvider } from "@/lib/context/NotificationsProvider/notifications-provider";
 import { OnboardingProvider } from "@/lib/context/OnboardingProvider/Onboarding-provider";
 import { SearchModalProvider } from "@/lib/context/SearchModalProvider/search-modal-provider";
@@ -27,6 +28,7 @@ import { UpdateMetadata } from "@/lib/helpers/updateMetadata";
 import { usePageTracking } from "@/services/analytics/june/usePageTracking";
 
 import "../lib/config/LocaleConfig/i18n";
+import styles from "./App.module.scss";
 import { FromConnectionsProvider } from "./chat/[chatId]/components/ActionsBar/components/KnowledgeToFeed/components/FromConnections/FromConnectionsProvider/FromConnection-provider";
 
 if (
@@ -45,6 +47,7 @@ const App = ({ children }: PropsWithChildren): JSX.Element => {
   const { fetchAllBrains } = useBrainContext();
   const { onClickOutside } = useOutsideClickListener();
   const { session } = useSupabase();
+  const { isOpened } = useMenuContext();
 
   usePageTracking();
 
@@ -64,11 +67,15 @@ const App = ({ children }: PropsWithChildren): JSX.Element => {
           <div className="flex flex-1 flex-col overflow-auto">
             <SearchModalProvider>
               <SearchModal />
-              <div className="relative h-full w-full flex justify-stretch items-stretch overflow-auto">
-                <Menu />
+              <div className={styles.app_container}>
+                <div className={styles.menu_container}>
+                  <Menu />
+                </div>
                 <div
                   onClick={onClickOutside}
-                  className="flex-1 overflow-scroll"
+                  className={`${styles.content_container} ${
+                    isOpened ? styles.blured : ""
+                  }`}
                 >
                   {children}
                 </div>
diff --git a/frontend/lib/components/Menu/Menu.module.scss b/frontend/lib/components/Menu/Menu.module.scss
index d460b5ecf..492a829e2 100644
--- a/frontend/lib/components/Menu/Menu.module.scss
+++ b/frontend/lib/components/Menu/Menu.module.scss
@@ -8,7 +8,7 @@
   background-color: var(--background-1);
   border-right: 1px solid var(--border-1);
   width: Variables.$menuWidth;
-  transition: width 0.2s ease-in-out;
+  transition: width 0.1s ease-in-out;
 
   &.hidden {
     width: 0;