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

@@ -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;
+      }
+    }
+  }
+}

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>

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;