fix: handle Discord button on scroll (#205)

src/App.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import {Navigate, Route, Routes, useLocation} from 'react-router-dom';
+import {Navigate, Route, Routes} from 'react-router-dom';
 
 import styles from './App.module.scss';
 import {TrackEvent} from './analytics';
@@ -15,11 +15,9 @@ import {openInNewTab} from './utils';
 export const App = () => {
   const [trackDiscordClick] = useTracking(TrackEvent.DISCORD_TAB_CLICK);
   const {DISCORD_LINK_URL} = useConstants();
-  const {isAcceptTerms} = useApp();
-  const {pathname} = useLocation();
+  const {isAcceptTerms, isScrollActive} = useApp();
   const {isLoggedIn} = useLogin();
   const liquidityProviders = useLiquidityProviders();
-  const isBridgeRoute = !['/terms', '/faq'].includes(pathname);
 
   const onDiscordClick = () => {
     trackDiscordClick();
@@ -29,7 +27,7 @@ export const App = () => {
   return (
     <div className={styles.app}>
       <Header />
-      <StyledBackground withLightAccent={isBridgeRoute}>
+      <StyledBackground withLightAccent={isScrollActive}>
         <Routes>
           <Route
             element={
@@ -45,7 +43,7 @@ export const App = () => {
           <Route element={<Navigate replace to="/" />} path="*" />
         </Routes>
       </StyledBackground>
-      {isBridgeRoute && <SideButton icon={<DiscordIcon />} onClick={onDiscordClick} />}
+      <SideButton icon={<DiscordIcon />} onClick={onDiscordClick} />
       <Footer />
     </div>
   );

src/components/UI/BurgerMenu/BurgerMenu.js

@@ -4,6 +4,7 @@ import {useBurgerMenuTranslation} from '../../../hooks';
 import {useApp} from '../../../providers/AppProvider';
 import {toClasses} from '../../../utils';
 import {BurgerMenuItem} from '../BurgerMenuItem/BurgerMenuItem';
+import {Menu} from '../Menu/Menu';
 import styles from './BurgerMenu.module.scss';
 
 export const BurgerMenu = () => {

src/components/UI/BurgerMenu/BurgerMenu.module.scss

@@ -48,8 +48,8 @@ $burger-symbol-size-2: 27px;
   }
 
   .burgerMenu {
-    margin: 5px;
-    z-index: 1000;
+    margin: 5px #{$--scroll-width}px 5px 5px;
+    z-index: 100000;
     position: absolute;
     transition: 0.3s ease-in-out;
     padding: 15px 60px 15px 10px;

src/components/UI/Menu/Menu.module.scss

@@ -1,7 +1,7 @@
 .menu {
   opacity: 0;
   max-height: 100%;
-  transition: all 0.4s ease-in-out;
+  transition: all 0.3s ease-in-out;
 
   &.show {
     opacity: 1;

src/components/UI/MultiChoiceMenu/MultiChoiceMenu.js

@@ -2,6 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 
 import {toClasses} from '../../../utils';
+import {Menu} from '../Menu/Menu';
 import {MultiChoiceErrorMessage} from '../MultiChoiceErrorMessage/MultiChoiceErrorMessage';
 import {MultiChoiceItem} from '../MultiChoiceItem/MultiChoiceItem';
 import styles from './MultiChoiceMenu.module.scss';
@@ -23,20 +24,22 @@ export const MultiChoiceMenu = ({title, description, choices, error, footer}) =>
   };
 
   return (
-    <div className={toClasses(styles.multiChoiceMenu, 'center')}>
-      <div className={styles.content}>
-        <div className={styles.title}>{title}</div>
-        {description && <p>{description}</p>}
-        <div className={styles.container}>{renderChoiceItems()}</div>
-        {error && <MultiChoiceErrorMessage message={error.message} />}
+    <Menu>
+      <div className={toClasses(styles.multiChoiceMenu, 'center')}>
+        <div className={styles.content}>
+          <div className={styles.title}>{title}</div>
+          {description && <p>{description}</p>}
+          <div className={styles.container}>{renderChoiceItems()}</div>
+          {error && <MultiChoiceErrorMessage message={error.message} />}
+        </div>
+        {footer && (
+          <>
+            <div className={styles.separator} />
+            {footer}
+          </>
+        )}
       </div>
-      {footer && (
-        <>
-          <div className={styles.separator} />
-          {footer}
-        </>
-      )}
-    </div>
+    </Menu>
   );
 };
 

src/components/UI/SideButton/SideButton.js

@@ -1,11 +1,22 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 
+import {useVars} from '../../../hooks';
+import {useApp} from '../../../providers/AppProvider';
 import styles from './SideButton.module.scss';
 
 export const SideButton = ({icon, onClick}) => {
+  const {isScrollActive} = useApp();
+  const {scrollWidth} = useVars();
+
   return (
-    <div className={styles.sideButton} onClick={onClick}>
+    <div
+      style={{
+        right: isScrollActive ? `${scrollWidth}px` : 0
+      }}
+      className={styles.sideButton}
+      onClick={onClick}
+    >
       {icon}
     </div>
   );

src/components/UI/SideButton/SideButton.module.scss

@@ -13,4 +13,5 @@
   align-items: center;
   justify-content: center;
   cursor: pointer;
+  transition: 0.3s ease-in-out;
 }

src/hooks/index.js

@@ -19,3 +19,4 @@ export * from './useAccountChange';
 export * from './useIsMaxTotalBalanceExceeded';
 export * from './useMaxTotalBalance';
 export * from './useMaxDeposit';
+export * from './useVars';

src/hooks/useVars.js

@@ -0,0 +1,5 @@
+import {useMemo} from 'react';
+
+import vars from '../styles/variables.module.scss';
+
+export const useVars = () => useMemo(() => vars, []);

src/providers/AppProvider/AppProvider.js

@@ -12,6 +12,7 @@ export const AppProvider = ({children}) => {
   const [state, dispatch] = useReducer(reducer, initialState);
   const {pathname} = useLocation();
   const navigate = useNavigate();
+  const isScrollActive = ['/terms', '/faq'].includes(pathname);
 
   const navigateToRoute = route => {
     pathname !== route && navigate(route);
@@ -40,6 +41,7 @@ export const AppProvider = ({children}) => {
 
   const value = {
     ...state,
+    isScrollActive,
     navigateToRoute,
     acceptTerms,
     login,

src/providers/AppProvider/app-context.js

@@ -4,6 +4,7 @@ import {initialState} from './app-reducer';
 
 export const AppContext = createContext({
   ...initialState,
+  isScrollActive: false,
   navigateToRoute: () => {},
   acceptTerms: () => {},
   login: () => {},

src/routes/Liquidity/Liquidity.js

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {Menu, MultiChoiceMenu} from '../../components/UI';
+import {MultiChoiceMenu} from '../../components/UI';
 import {useLiquidityProviders, useLiquidityTranslation} from '../../hooks';
 import {openInNewTab} from '../../utils';
 
@@ -20,12 +20,10 @@ export const Liquidity = () => {
   };
 
   return (
-    <Menu>
-      <MultiChoiceMenu
-        choices={mapLiquidityProviders()}
-        description={descriptionTxt}
-        title={titleTxt}
-      />
-    </Menu>
+    <MultiChoiceMenu
+      choices={mapLiquidityProviders()}
+      description={descriptionTxt}
+      title={titleTxt}
+    />
   );
 };

src/styles/variables.module.scss

@@ -1,7 +1,9 @@
 $--header-height: 80;
 $--footer-height: 50;
+$--scroll-width: 7;
 $--main-offset: $--header-height + $--footer-height + 2;
 
 :export {
   mainOffset: $--main-offset;
+  scrollWidth: $--scroll-width;
 }