Improve header 8

src/custom/components/Header/MobileMenuIcon/index.tsx

@@ -1,73 +1,79 @@
 import styled, { css } from 'styled-components/macro'
-import { useState } from 'react'
 
-const Wrapper = styled.div<{ isOpen: boolean }>`
+const Wrapper = styled.div<{ isMobileMenuOpen: boolean; height?: number; width?: number; lineSize?: number }>`
+  z-index: 102;
   display: flex;
   cursor: pointer;
-  height: 50px;
-  margin: 0 auto;
+  margin: 0 6px;
   position: relative;
-  width: 60px;
+  width: ${({ width }) => (width ? width + 'px' : '42px')};
+  height: ${({ height }) => (height ? height + 'px' : '22px')};
 
 
   span {
     background-color: ${({ theme }) => theme.text1};
     border-radius: 3px;
-    height: 6px;
+    height: ${({ lineSize }) => (lineSize ? lineSize + 'px' : '3px')};
     position: absolute;
-    transition-duration: 150ms;
-    transition: cubic-bezier(0.8, 0.5, 0.2, 1.4);
+    transition: all 0.15s cubic-bezier(0.8, 0.5, 0.2, 1.4);
     width: 100%;
+    margin: auto;
   }
 
   span:nth-child(1) {
-    left: 0px;
-    top: 0px;
-    transition-duration: 150ms;
+    left: 0;
+    top: 0;
   }
 
   span:nth-child(2) {
-    left: 0px;
+    left: 0;
     opacity: 1;
-    top: 21px;
+    top: 50%;
+    bottom: 50%;
   }
 
   span:nth-child(3) {
-    bottom: 0px;
-    left: 0px;
-    transition-duration: 150ms;
+    bottom: 0;
+    left: 0;
+    width: 75%;
   }
 
 
-  ${({ isOpen }) =>
-    isOpen &&
+  ${({ isMobileMenuOpen }) =>
+    isMobileMenuOpen &&
     css`
       span:nth-child(1) {
-        top: 21px;
         transform: rotate(45deg);
-        transition-duration: 150ms;
+        top: 50%;
+        bottom: 50%;
       }
 
       span:nth-child(2) {
         opacity: 0;
       }
 
       span:nth-child(3) {
-        top: 21px;
         transform: rotate(-45deg);
-        transition-duration: 150ms;
+        top: 50%;
+        bottom: 50%;
+        width: 100%;
       }
     `};
 
 }
 `
 
-export default function MobileMenuIcon() {
-  const [isOpen, setIsOpen] = useState(false)
-  const handleOnClick = () => setIsOpen(!isOpen)
+interface IconProps {
+  isMobileMenuOpen: boolean
+  width?: number
+  height?: number
+  lineSize?: number
+  onClick: () => void
+}
 
+export default function MobileMenuIcon({ isMobileMenuOpen, width, height, lineSize, onClick }: IconProps) {
   return (
-    <Wrapper onClick={handleOnClick} isOpen={isOpen}>
+    <Wrapper isMobileMenuOpen={isMobileMenuOpen} width={width} height={height} lineSize={lineSize} onClick={onClick}>
       <span></span>
       <span></span>
       <span></span>

src/custom/components/Header/index.tsx

@@ -4,6 +4,7 @@ import { useHistory } from 'react-router-dom'
 import { useActiveWeb3React } from 'hooks/web3'
 import { useNativeCurrencyBalances } from 'state/wallet/hooks'
 import { useDarkModeManager } from 'state/user/hooks'
+import { useMediaQuery, upToLarge } from 'hooks/useMediaQuery'
 import {
   AMOUNT_PRECISION,
   DUNE_DASHBOARD_LINK,
@@ -84,6 +85,10 @@ export default function Header() {
 
   const history = useHistory()
   const handleBalanceButtonClick = () => history.push('/account')
+  const isUpToLarge = useMediaQuery(upToLarge)
+
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false)
+  const handleMobileMenuOnClick = () => setIsMobileMenuOpen(!isMobileMenuOpen)
 
   // Toggle the 'noScroll' class on body, whenever the orders panel is open.
   // This removes the inner scrollbar on the page body, to prevent showing double scrollbars.
@@ -97,12 +102,12 @@ export default function Header() {
     <Wrapper>
       <HeaderModWrapper>
         <HeaderRow>
-          <Title href=".">
+          <Title href="." isMobileMenuOpen={isMobileMenuOpen}>
             <UniIcon>
               <LogoImage />
             </UniIcon>
           </Title>
-          <HeaderLinks>
+          <HeaderLinks isMobileMenuOpen={isMobileMenuOpen}>
             <StyledNavLink to="/swap">Swap</StyledNavLink>
             <StyledNavLink to="/account">Account</StyledNavLink>
             <StyledNavLink to="/faq">FAQ</StyledNavLink>
@@ -177,8 +182,9 @@ export default function Header() {
             </AccountElement>
           </HeaderElement>
         </HeaderControls>
+
+        {isUpToLarge && <MobileMenuIcon isMobileMenuOpen={isMobileMenuOpen} onClick={handleMobileMenuOnClick} />}
         {isOrdersPanelOpen && <OrdersPanel closeOrdersPanel={closeOrdersPanel} />}
-        <MobileMenuIcon />
       </HeaderModWrapper>
     </Wrapper>
   )

src/custom/components/Header/styled.ts

@@ -1,4 +1,4 @@
-import styled from 'styled-components/macro'
+import styled, { css } from 'styled-components/macro'
 import { transparentize, darken } from 'polished'
 import HeaderMod, {
   Title as TitleMod,
@@ -87,14 +87,23 @@ export const Wrapper = styled.div`
 
 export const HeaderModWrapper = styled(HeaderMod)``
 
-export const Title = styled(TitleMod)`
+export const Title = styled(TitleMod)<{ isMobileMenuOpen: boolean }>`
   margin: 0;
   text-decoration: none;
   color: ${({ theme }) => theme.text1};
+
+  ${({ theme, isMobileMenuOpen }) => theme.mediaWidth.upToLarge`
+    ${
+      isMobileMenuOpen &&
+      css`
+        z-index: 101;
+      `
+    }
+  `};
 `
 
-export const HeaderLinks = styled(HeaderLinksMod)`
-  margin: 5px 0 0 0;
+export const HeaderLinks = styled(HeaderLinksMod)<{ isMobileMenuOpen: boolean }>`
+  margin: 0;
 
   // Enforce uniform styling of different menu items/components
   > ${StyledNavLink}, > ${MenuFlyout} > button {
@@ -115,6 +124,11 @@ export const HeaderLinks = styled(HeaderLinksMod)`
     transition: background 0.15s ease-in-out, color 0.15s ease-in-out;
     color: ${({ theme }) => transparentize(0.4, theme.text1)};
 
+    ${({ theme }) => theme.mediaWidth.upToLarge`
+      width: 100%;
+      margin: 0;
+    `};
+
     > svg > path {
       fill: ${({ theme }) => transparentize(0.4, theme.text1)};
       transition: fill 0.15s ease-in-out;
@@ -134,8 +148,27 @@ export const HeaderLinks = styled(HeaderLinksMod)`
     }
   }
 
-  ${({ theme }) => theme.mediaWidth.upToLarge`
+  ${({ theme, isMobileMenuOpen }) => theme.mediaWidth.upToLarge`
     display: none;
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    z-index: 100;
+    background: ${({ theme }) => theme.bg4};
+    outline: 0;
+    padding: 72px 8px;
+    overflow-y: auto;
+
+    ${
+      isMobileMenuOpen &&
+      css`
+        display: block;
+        // transform: translate3d(100%, 0, 0);
+      `
+    }
   `};
 `
 

src/custom/hooks/useMediaQuery.ts

@@ -0,0 +1,22 @@
+import { useState, useEffect } from 'react'
+import { MEDIA_WIDTHS } from 'theme'
+
+export const useMediaQuery = (query: string) => {
+  const [matches, setMatches] = useState(false)
+
+  useEffect(() => {
+    const media = window.matchMedia(query)
+    if (media.matches !== matches) {
+      setMatches(media.matches)
+    }
+    const listener = () => setMatches(media.matches)
+    window.addEventListener('resize', listener)
+    return () => window.removeEventListener('resize', listener)
+  }, [matches, query])
+
+  return matches
+}
+
+export const upToSmall = `(max-width: ${MEDIA_WIDTHS.upToSmall}px)`
+export const upToMedium = `(max-width: ${MEDIA_WIDTHS.upToMedium}px)`
+export const upToLarge = `(max-width: ${MEDIA_WIDTHS.upToLarge}px)`