Merge pull request #560 from hermeznetwork/fix-qr-scanner

Fix portal to work as expected with the sidenav
hermeznetwork · Jun 25, 2021 · 2470fc8 · 2470fc8
2 parents 49270c8 + f92bc45
commit 2470fc8
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 17 deletions.
diff --git a/public/index.html b/public/index.html
@@ -29,7 +29,8 @@
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="app-root"></div>
-    <div id="portal-root"></div>
+    <div id="fullscreen-modal-root"></div>
+    <div id="sidenav-root"></div>
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.

diff --git a/src/styles/theme.js b/src/styles/theme.js
@@ -44,7 +44,7 @@ const theme = {
   },
   spacing: (value) => value * 8,
   headerHeight: 80,
-  sideBarWidth: 295
+  sidenavWidth: 295
 }
 
 export default theme
diff --git a/src/views/shared/portal/portal.styles.js b/src/views/shared/portal/portal.styles.js
@@ -1,13 +1,20 @@
 import { createUseStyles } from 'react-jss'
 
 const usePortalStyles = createUseStyles((theme) => ({
-  root: {
-    position: 'absolute',
+  fullScreenModalRoot: {
+    position: 'fixed',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0
+  },
+  sidenavRoot: {
+    width: theme.sidenavWidth,
+    position: 'fixed',
     top: 0,
-    left: 'auto',
     right: 0,
     bottom: 0,
-    width: theme.sideBarWidth
+    left: 'auto'
   }
 }))
 

diff --git a/src/views/shared/portal/portal.view.jsx b/src/views/shared/portal/portal.view.jsx
@@ -2,13 +2,22 @@ import React from 'react'
 import ReactDOM from 'react-dom'
 import usePortalStyles from './portal.styles'
 
-function Portal ({ selector, children }) {
+export const PortalSelector = {
+  FULLSCREEN_MODAL: '#fullscreen-modal-root',
+  SIDENAV: '#sidenav-root'
+}
+
+function Portal ({ selector = PortalSelector.FULLSCREEN_MODAL, children }) {
   const classes = usePortalStyles()
-  const portalRoot = document.querySelector('#portal-root')
+  const portalRoot = document.querySelector(selector)
   const [divElement] = React.useState(() => {
     const el = document.createElement('div')
 
-    el.classList.add(classes.root)
+    if (selector === PortalSelector.FULLSCREEN_MODAL) {
+      el.classList.add(classes.fullScreenModalRoot)
+    } else {
+      el.classList.add(classes.sidenavRoot)
+    }
 
     return el
   })

diff --git a/src/views/shared/sidenav/sidenav.styles.js b/src/views/shared/sidenav/sidenav.styles.js
@@ -2,14 +2,10 @@ import { createUseStyles } from 'react-jss'
 
 const useSidenavStyles = createUseStyles((theme) => ({
   root: {
-    top: 0,
-    right: 0,
-    bottom: 0,
-    width: theme.sideBarWidth,
     display: 'flex',
-    zIndex: 999,
-    position: 'fixed',
     minHeight: '100vh',
+    height: '100%',
+    width: '100%',
     justifyContent: 'flex-end',
     overflow: 'hidden',
     boxShadow: '-5px 0 30px 0 rgba(136, 139, 170, 0.15)',

diff --git a/src/views/shared/sidenav/sidenav.view.jsx b/src/views/shared/sidenav/sidenav.view.jsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import Portal from '../portal/portal.view'
+import Portal, { PortalSelector } from '../portal/portal.view'
 
 import useSidenavStyles from './sidenav.styles'
 import { ReactComponent as AngleDownIcon } from '../../../images/icons/angle-down.svg'
@@ -23,7 +23,7 @@ function Sidenav ({ children, onClose }) {
   }
 
   return (
-    <Portal>
+    <Portal selector={PortalSelector.SIDENAV}>
       <div className={classes.root}>
         <div ref={sidenavContentRef} className={classes.content} tabIndex={0} onKeyDown={handleKeyDown}>
           <button className={classes.hideButton} onClick={onClose}>