fix: menu flyout (#2075)

KyberNetwork · Jul 14, 2023 · ad5798b · ad5798b
1 parent 7aa3759
commit ad5798b
Show file tree

Hide file tree

Showing 2 changed files with 106 additions and 63 deletions.
diff --git a/src/components/Menu/index.tsx b/src/components/Menu/index.tsx
@@ -1,7 +1,18 @@
 import { Trans, t } from '@lingui/macro'
-import { useEffect, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { isMobile } from 'react-device-detect'
-import { Award, BookOpen, Edit, FileText, HelpCircle, Info, MessageCircle, PieChart, Share2 } from 'react-feather'
+import {
+  Award,
+  BookOpen,
+  ChevronDown,
+  Edit,
+  FileText,
+  HelpCircle,
+  Info,
+  MessageCircle,
+  PieChart,
+  Share2,
+} from 'react-feather'
 import { useLocation, useNavigate } from 'react-router-dom'
 import { useMedia } from 'react-use'
 import { Text } from 'rebass'
@@ -62,14 +73,6 @@ const MenuItem = styled.li`
   color: ${({ theme }) => theme.subText};
   font-size: 15px;
 
-  :hover {
-    color: ${({ theme }) => theme.text};
-    cursor: pointer;
-    a {
-      color: ${({ theme }) => theme.text};
-    }
-  }
-
   svg {
     margin-right: 8px;
     height: 16px;
@@ -106,14 +109,6 @@ const NavLinkBetween = styled(MenuItem)`
   }
 `
 
-const CampaignWrapper = styled.div`
-  display: none;
-
-  @media (max-width: 560px) {
-    display: flex;
-  }
-`
-
 const StyledMenuButton = styled.button<{ active?: boolean }>`
   border: none;
   background-color: transparent;
@@ -151,6 +146,11 @@ const StyledMenu = styled.div`
   text-align: left;
 `
 
+const ListWrapper = styled.div`
+  max-height: calc(100vh - 150px);
+  overflow-y: scroll;
+`
+
 const MenuFlyoutBrowserStyle = css`
   min-width: unset;
   right: -8px;
@@ -195,6 +195,28 @@ const Title = styled(MenuItem)`
   font-size: 16px;
   color: ${({ theme }) => theme.text};
 `
+
+const ScrollEnd = styled.div<{ show: boolean }>`
+  visibility: ${({ show }) => (show ? 'initial' : 'hidden')};
+  position: sticky !important;
+  width: 100%;
+  text-align: center;
+  z-index: 2;
+  @keyframes floating {
+    from {
+      bottom: 10px;
+    }
+    to {
+      bottom: -10px;
+    }
+  }
+  animation-name: floating;
+  animation-duration: 1s;
+  animation-timing-function: ease;
+  animation-iteration-count: infinite;
+  animation-direction: alternate-reverse;
+`
+
 const noop = () => {}
 
 export default function Menu() {
@@ -242,6 +264,29 @@ export default function Menu() {
     mixpanelHandler(MIXPANEL_TYPE.MENU_PREFERENCE_CLICK, { menu: name })
   }
 
+  const wrapperNode = useRef<HTMLDivElement>(null)
+  const [showScroll, setShowScroll] = useState<boolean>(false)
+
+  useEffect(() => {
+    const wrapper = wrapperNode.current
+    if (wrapper) {
+      const abortController = new AbortController()
+      const onScroll = () => {
+        if (abortController.signal.aborted) return
+        setShowScroll(Math.abs(wrapper.offsetHeight + wrapper.scrollTop - wrapper.scrollHeight) > 10) //no need to show scroll down when scrolled to last 10px
+      }
+      onScroll()
+      wrapper.addEventListener('scroll', onScroll)
+      window.addEventListener('resize', onScroll)
+      return () => {
+        abortController.abort()
+        wrapper.removeEventListener('scroll', onScroll)
+        window.removeEventListener('resize', onScroll)
+      }
+    }
+    return
+  }, [])
+
   return (
     <StyledMenu>
       <MenuFlyout
@@ -261,7 +306,7 @@ export default function Menu() {
             <LanguageSelector setIsSelectingLanguage={setIsSelectingLanguage} />
           </AutoColumn>
         ) : (
-          <>
+          <ListWrapper ref={wrapperNode}>
             <Title style={{ paddingTop: 0 }}>
               <Trans>Menu</Trans>
             </Title>
@@ -323,30 +368,28 @@ export default function Menu() {
               />
             </KyberAIWrapper>
 
-            <CampaignWrapper>
-              <MenuItem>
-                <NavDropDown
-                  icon={<Award />}
-                  title={
-                    <Text>
-                      <Trans>Campaigns</Trans>
-                    </Text>
-                  }
-                  link={'#'}
-                  options={[
-                    { link: APP_PATHS.CAMPAIGN, label: t`Trading Campaigns` },
-                    {
-                      link: APP_PATHS.GRANT_PROGRAMS,
-                      label: (
-                        <Text as="span">
-                          <Trans>Trading Grant Campaign</Trans>
-                        </Text>
-                      ),
-                    },
-                  ]}
-                />
-              </MenuItem>
-            </CampaignWrapper>
+            <MenuItem>
+              <NavDropDown
+                icon={<Award />}
+                title={
+                  <Text>
+                    <Trans>Campaigns</Trans>
+                  </Text>
+                }
+                link={'#'}
+                options={[
+                  { link: APP_PATHS.CAMPAIGN, label: t`Trading Campaigns` },
+                  {
+                    link: APP_PATHS.GRANT_PROGRAMS,
+                    label: (
+                      <Text as="span">
+                        <Trans>Trading Grant Campaign</Trans>
+                      </Text>
+                    ),
+                  },
+                ]}
+              />
+            </MenuItem>
 
             {under1440 && (
               <MenuItem>
@@ -574,7 +617,10 @@ export default function Menu() {
             <Text fontSize="10px" fontWeight={300} color={theme.subText} mt="16px" textAlign={'center'}>
               kyberswap@{TAG}
             </Text>
-          </>
+            <ScrollEnd show={showScroll}>
+              <ChevronDown color={theme.text4} />
+            </ScrollEnd>
+          </ListWrapper>
         )}
       </MenuFlyout>
 

diff --git a/src/components/MenuFlyout/index.tsx b/src/components/MenuFlyout/index.tsx
@@ -17,28 +17,25 @@ import { useOnClickOutside } from 'hooks/useOnClickOutside'
 import useTheme from 'hooks/useTheme'
 
 const Arrow = css`
-  & > div {
-    position: relative;
-    :after {
-      bottom: 100%;
-      right: 0;
-      top: -40px;
-      border: solid transparent;
-      content: '';
-      height: 0;
-      width: 0;
-      position: absolute;
-      pointer-events: none;
-      border-bottom-color: ${({ theme }) => theme.tableHeader};
-      border-width: 10px;
-      margin-left: -10px;
-    }
+  :after {
+    bottom: 100%;
+    right: 20px;
+    top: -20px;
+    border: solid transparent;
+    content: '';
+    height: 0;
+    width: 0;
+    position: absolute;
+    pointer-events: none;
+    border-bottom-color: ${({ theme }) => theme.tableHeader};
+    border-width: 10px;
+    margin-left: -10px;
   }
   ${({ theme }) => theme.mediaWidth.upToLarge`
-    & > div:after {
-      top: calc(100% + 20px);
+    :after {
+      top: 100%;
       border-top-color: ${({ theme }) => theme.tableHeader};
-      border-bottom-color: transparent
+      border-bottom-color: transparent;
       border-width: 10px;
       margin-left: -10px;
     }