Merge pull request #149 from terraswap/fix/mobile-menu

fix: show mobile menu button
terraswap · Dec 27, 2022 · c98d691 · c98d691
2 parents f2a6eef + ff8e57b
commit c98d691
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 22 deletions.
diff --git a/src/layouts/Header.module.scss b/src/layouts/Header.module.scss
@@ -8,29 +8,28 @@
   left: 0;
   top: 0;
   padding: 16px 0;
+  @include mobile {
+    background-color: $realblue;
+  }
   z-index: 5000;
   transition: padding 0.125s ease-in-out;
   overflow: visible;
   margin-bottom: 50px;
 
-  @include mobile {
-    background-color: $realblue;
-  }
-
-  // &::after {
-  //   content: "";
-  //   position: absolute;
-  //   width: 100%;
-  //   height: 1px;
-  //   left: 0;
-  //   bottom: 0;
-  //   background-color: #ffffff;
-  //   opacity: 0.15;
+  &::after {
+    content: "";
+    position: absolute;
+    width: 100%;
+    height: 1px;
+    left: 0;
+    bottom: 0;
+    background-color: #ffffff;
+    opacity: 0.15;
 
-  //   @include mobile {
-  //     bottom: 0;
-  //   }
-  // }
+    @include mobile {
+      bottom: 0;
+    }
+  }
 
   & .container {
     position: relative;
@@ -80,7 +79,4 @@
   @include desktop {
     @include flex(space-between);
   }
-  @include mobile {
-    @include flex(center);
-  }
 }
diff --git a/src/layouts/Sidebar.tsx b/src/layouts/Sidebar.tsx
@@ -4,6 +4,8 @@ import styled, { css } from "styled-components"
 import { NavLink as navLink, useLocation } from "react-router-dom"
 import { useModal } from "components/Modal"
 
+import iconMenu from "images/icon-menu.svg"
+import iconClose from "images/icon-close-primary.svg"
 import { socialMediaList } from "constants/constants"
 import SocialMediaAnchor from "components/SocialMediaAnchor"
 import ChangeVersionButton from "components/ChangeVersionButton"
@@ -96,6 +98,23 @@ const NavLink = styled(navLink)`
   }
 `
 
+const MobileButton = styled.button<{ isOpen?: boolean }>`
+  display: none;
+  width: 32px;
+  height: 32px;
+  position: fixed;
+  z-index: 5550;
+  top: 16px;
+  right: 16px;
+  background-image: url("${({ isOpen }) => (isOpen ? iconClose : iconMenu)}");
+  background-size: contain;
+  background-position: 50% 50%;
+  background-repeat: no-repeat;
+  @media screen and (max-width: ${({ theme }) => theme.breakpoint}) {
+    display: block;
+  }
+`
+
 const SocialMediaList = styled.div<{ isOpen?: boolean }>`
   width: 100%;
   height: auto;
@@ -141,11 +160,15 @@ const SocialMediaList = styled.div<{ isOpen?: boolean }>`
 `
 
 const Sidebar = () => {
-  const { isOpen, close } = useModal()
+  const { isOpen, open, close } = useModal()
   const location = useLocation()
 
   return (
     <>
+      <MobileButton
+        isOpen={isOpen}
+        onClick={() => (!isOpen ? open() : close())}
+      />
       <Wrapper isOpen={isOpen}>
         <div>
           <NavLink
@@ -158,7 +181,7 @@ const Sidebar = () => {
           <NavLink to="/swap" onClick={() => close()}>
             Swap
           </NavLink>
-          <div style={{ height: 25 }}></div>
+          <div style={{ height: 25 }} />
           <ChangeVersionButton />
         </div>
       </Wrapper>