feat(Assistant): Put mobile search bar on body with portal

we need the component to be among the routes in order to access the router. Except that to get the fixed style, the component has to be outside the MainView... so we use Portal for that.
cozy · Oct 17, 2024 · 43c308e · 43c308e
1 parent 2ee46bb
commit 43c308e
Showing 1 changed file with 26 additions and 23 deletions.
diff --git a/src/assistant/AssistantWrapperMobile.jsx b/src/assistant/AssistantWrapperMobile.jsx
@@ -7,6 +7,7 @@ import { getFlagshipMetadata } from 'cozy-device-helper'
 import { useBreakpoints } from 'cozy-ui/transpiled/react/providers/Breakpoints'
 import { useCozyTheme } from 'cozy-ui/transpiled/react/providers/CozyTheme'
 import SearchBar from 'cozy-ui/transpiled/react/SearchBar'
+import Portal from 'cozy-ui/transpiled/react/Portal'
 import Icon from 'cozy-ui/transpiled/react/Icon'
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 
@@ -23,29 +24,31 @@ export const AssistantWrapperMobile = () => {
   if (!flag('cozy.assistant.enabled') || !isMobile) return null
 
   return (
-    <div
-      className={cx(
-        styles['assistantWrapper-mobile'],
-        styles[`assistantWrapper-mobile--${type}`],
-        {
-          [styles['assistantWrapper-mobile--offset']]: flag(
-            'home.fab.button.enabled'
-          ),
-          [styles['assistantWrapper-mobile--immersive']]:
-            getFlagshipMetadata().immersive
-        }
-      )}
-    >
-      <SearchBar
-        size="medium"
-        icon={
-          <Icon className="u-ml-1 u-mr-half" icon={AssistantIcon} size={24} />
-        }
-        type="button"
-        label={t('assistant.search.placeholder')}
-        onClick={() => navigate('search')}
-      />
-    </div>
+    <Portal into="body">
+      <div
+        className={cx(
+          styles['assistantWrapper-mobile'],
+          styles[`assistantWrapper-mobile--${type}`],
+          {
+            [styles['assistantWrapper-mobile--offset']]: flag(
+              'home.fab.button.enabled'
+            ),
+            [styles['assistantWrapper-mobile--immersive']]:
+              getFlagshipMetadata().immersive
+          }
+        )}
+      >
+        <SearchBar
+          size="medium"
+          icon={
+            <Icon className="u-ml-1 u-mr-half" icon={AssistantIcon} size={24} />
+          }
+          type="button"
+          label={t('assistant.search.placeholder')}
+          onClick={() => navigate('search')}
+        />
+      </div>
+    </Portal>
   )
 }