Fix: hide header and sidebar on the Export page (#4146)

5afe · Jan 25, 2023 · af344fe · af344fe
1 parent 0625135
commit af344fe
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 14 deletions.
diff --git a/src/components/AppLayout/Header/components/Layout.tsx b/src/components/AppLayout/Header/components/Layout.tsx
@@ -2,7 +2,6 @@ import ClickAwayListener from '@material-ui/core/ClickAwayListener'
 import List from '@material-ui/core/List'
 import Popper from '@material-ui/core/Popper'
 import { withStyles } from '@material-ui/core/styles'
-import { Link } from 'react-router-dom'
 
 import Provider from './Provider'
 import NetworkSelector from './NetworkSelector'
@@ -11,13 +10,10 @@ import Col from 'src/components/layout/Col'
 import Row from 'src/components/layout/Row'
 import { headerHeight, md, screenSm, sm } from 'src/theme/variables'
 import { useStateHandler } from 'src/logic/hooks/useStateHandler'
-import { ROOT_ROUTE } from 'src/routes/routes'
 import WalletSwitch from 'src/components/WalletSwitch'
 import Divider from 'src/components/layout/Divider'
 import { shouldSwitchWalletChain } from 'src/logic/wallets/store/selectors'
 import { useSelector } from 'react-redux'
-import { OVERVIEW_EVENTS } from 'src/utils/events/overview'
-import Track from 'src/components/Track'
 import Notifications from 'src/components/AppLayout/Header/components/Notifications'
 import AnimatedLogo from 'src/components/AppLayout/Header/components/AnimatedLogo'
 import SafeTokenWidget, { getSafeTokenAddress } from './SafeTokenWidget'
@@ -107,13 +103,11 @@ const Layout = ({ classes, providerDetails, providerInfo }) => {
   const chainHasSafeToken = Boolean(getSafeTokenAddress(chainId))
 
   return (
-    <Row className={classes.summary}>
+    <Row className={classes.summary} id="header">
       <Col className={classes.logo} middle="xs" start="xs">
-        <Track {...OVERVIEW_EVENTS.HOME}>
-          <Link to={ROOT_ROUTE}>
-            <AnimatedLogo />
-          </Link>
-        </Track>
+        <a href="https://app.safe.global">
+          <AnimatedLogo />
+        </a>
       </Col>
 
       <Spacer />

diff --git a/src/components/AppLayout/Sidebar/index.tsx b/src/components/AppLayout/Sidebar/index.tsx
@@ -105,7 +105,7 @@ const Sidebar = ({
   }
 
   return (
-    <>
+    <div id="sidebar">
       <SafeHeader
         address={safeAddress}
         safeName={safeName}
@@ -146,7 +146,7 @@ const Sidebar = ({
           </Track>
         </HelpList>
       </HelpContainer>
-    </>
+    </div>
   )
 }
 

diff --git a/src/components/layout/Page/index.tsx b/src/components/layout/Page/index.tsx
@@ -5,7 +5,9 @@ import styles from './index.module.scss'
 const cx = classNames.bind(styles)
 
 const Page = ({ align, children, overflow }: any) => (
-  <main className={cx(styles.page, align, { overflow })}>{children}</main>
+  <main className={cx(styles.page, align, { overflow })} style={{ position: 'relative' }}>
+    {children}
+  </main>
 )
 
 export default Page
diff --git a/src/routes/export/Export.tsx b/src/routes/export/Export.tsx
@@ -1,11 +1,25 @@
-import { ReactElement } from 'react'
+import { ReactElement, useEffect } from 'react'
 
 import Page from 'src/components/layout/Page'
 import Block from 'src/components/layout/Block'
 import DataExport from 'src/routes/safe/components/Settings/DataExport'
 import { Paper } from '@material-ui/core'
 
 function Export(): ReactElement {
+  // Hide header elements and the sidebar
+  useEffect(() => {
+    const header = document?.getElementById('header')
+    const sidebar = document?.getElementById('sidebar')
+    if (header && sidebar) {
+      sidebar.style.display = 'none'
+      Array.from(header.children)
+        .slice(1)
+        .forEach((child: HTMLElement) => {
+          child.style.display = 'none'
+        })
+    }
+  }, [])
+
   return (
     <Page>
       <Block>