basic implementation of mobile menu header

12 files changed, 154 insertions, 29 deletions

diff --git a/src/components/LandingPage/Harvest.js b/src/components/LandingPage/Harvest.js
index fdf363e..46a4c7d 100644
--- a/src/components/LandingPage/Harvest.js
+++ b/src/components/LandingPage/Harvest.js
@@ -14,8 +14,14 @@ const Wrapper = styled.div`
 `;
 
 const HarvestLogo = styled.img`
-  width: 50%;
-  max-width: 481px;
+  @media screen and (min-width: ${MOBILE_WIDTH}px) {
+    max-width: 481px;
+  }
+  @media screen and (max-width: ${MOBILE_WIDTH}px) {
+    width: 95%;
+    height: auto;
+    margin: 10px 0px;
+  }
 `;
 const ContextArea = styled.div`
   flex: 1;
@@ -26,7 +32,7 @@ const ContextArea = styled.div`
 
 const Context = styled.div`
   /* border: 1px solid red; */
-  width: 300px;
+  /* width: 300px; */
   padding: 20px;
   @media screen and (max-width: ${MOBILE_WIDTH}px) {
     width: 100%;
diff --git a/src/components/LandingPage/Resources.js b/src/components/LandingPage/Resources.js
index 3a1f05d..e6ea017 100644
--- a/src/components/LandingPage/Resources.js
+++ b/src/components/LandingPage/Resources.js
@@ -57,10 +57,10 @@ const Resources = () => (
         />
       </Title>
       <Content>哈囉哈囉123, 你好哈哈哈</Content>
-      <ExtLink>      
+      <ExtLink>
         <FormattedMessage
           id="Learn More"
-        /> 
+        />
         >
       </ExtLink>
     </Card>
diff --git a/src/components/header.js b/src/components/header.js
index cabfee2..10bea07 100644
--- a/src/components/header.js
+++ b/src/components/header.js
@@ -7,22 +7,37 @@ import {
   MOBILE_WIDTH,
   MENU_ITEMS,
 } from 'src/constants/app';
-import Link from 'src/components/Link';
-import Logo from 'src/images/real_orange.png';
+// import Link from 'src/components/Link';
+import Logo from 'src/images/tangerine-logo.svg';
+import memu from 'src/images/menu-mobile.svg';
+import closeSvg from 'src/images/close.svg';
 
 const LogoImg = styled.img`
-  height: 50px;
-  width: 50px;
-  margin: 0px 20px;
+  /* border: 1px solid black; */
+  @media screen and (max-width: ${MOBILE_WIDTH}px) {
+    height: 30px;
+  }
 `;
-const Title = styled.span`
-  font-weight: bold;
-  font-size: x-large;
-  a {
-    text-decoration: none;
-    color: black;
+const MenuImg = styled.img`
+  height: 25px;
+  @media screen and (min-width: ${MOBILE_WIDTH}px) {
+    display: none;
+  }
+  &:hover {
+    cursor: pointer;
   }
 `;
+// const Title = styled.span`
+//   font-weight: bold;
+//   font-size: x-large;
+//   a {
+//     text-decoration: none;
+//     color: black;
+//   }
+//   @media screen and (max-width: ${MOBILE_WIDTH}px) {
+//     font-size: small;
+//   }
+// `;
 
 const popup = keyframes`
   from {
@@ -45,8 +60,7 @@ const Wrapper = styled.header`
   position: fixed;
   width: 100vw;
   max-width: 100vw;
-  z-index: 1000;
-  /* left: -16px; */
+  z-index: 100;
   top: ${p => p.control ? 0 : -HEADER_HEIGHT}px;
   animation: ${p => p.enableAnimation
     ? (p.control ? popup : hide)
@@ -58,10 +72,11 @@ const Wrapper = styled.header`
   align-items: center;
   background-color: white;
   color: black;
-  /* padding: 0px 20px; */
-  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
+  padding: 0px 60px;
+  border-bottom: 0.5px solid rgba(0, 0, 0, 0.2);
   @media screen and (max-width: ${MOBILE_WIDTH}px) {
     height: ${MOBILE_HEADER_HEIGHT}px;
+    padding: 0px 20px;
   }
 `;
 
@@ -78,7 +93,7 @@ const Padding = styled.div`
   flex: 1;
 `;
 const MenuItem = styled.div`
-  margin: 0px 15px;
+  margin-left: 50px;
   text-align: center;
   cursor: pointer;
   font-size: x-largre;
@@ -90,22 +105,76 @@ const ItemArea = styled.div`
   display: flex;
   /* border: 1px solid red; */
   margin: 20px;
+  @media screen and (max-width: ${MOBILE_WIDTH}px) {
+    display: none;
+  }
+`;
+
+const MobilePopup = keyframes`
+  from {
+    opacity: 0;
+    z-index: -1;
+  }
+  to {
+    opacity: 1;
+    z-index: 1001;
+  }
+`;
+const MobileHide = keyframes`
+  from {
+    opacity: 1;
+    z-index: 1001;
+  }
+  to {
+    opacity: 0;
+    z-index: -1;
+  }
+`;
+
+const MobileMenu = styled.div`
+  position: fixed;
+  width: 100vw;
+  height: 100vh;
+  z-index: ${p => p.show ? 1001 : -1};;
+  background-color: white;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  opacity: ${p => p.show ? 1 : 0};
+  animation: ${p => (p.show !== null)
+    ? (p.show ? MobilePopup : MobileHide)
+    : ''
+  } 0.2s ease-out;
+`;
+const CloseIcon = styled.img`
+  width: 34px;
+  cursor: pointer;
 `;
 
 const Header = ({ showup }) => {
   const [enableAnimation, setEnableAnimation] = useState(false);
+  const [mobileMenu, setMobileMenu] = useState(null);
   if (!showup && !enableAnimation) {
     setEnableAnimation(true);
   }
   return (
     <>
+      <MobileMenu show={mobileMenu}>
+        <CloseIcon
+          onClick={() => {
+            setMobileMenu(false);
+          }}
+          src={closeSvg}
+        />
+      </MobileMenu>
       <PlaceHolder />
       <Wrapper
         control={showup}
         enableAnimation={enableAnimation}
       >
         <LogoImg src={Logo} />
-        <Title>
+        {/* <Title>
           <Link
             to="/"
           >
@@ -114,7 +183,7 @@ const Header = ({ showup }) => {
               defaultMessage="Tangerine Network"
             />
           </Link>
-        </Title>
+        </Title> */}
         <Padding />
         <ItemArea>
           {MENU_ITEMS.map(it => (
@@ -125,6 +194,12 @@ const Header = ({ showup }) => {
             </MenuItem>
           ))}
         </ItemArea>
+        <MenuImg
+          onClick={() => {
+            setMobileMenu(true);
+          }}
+          src={memu}
+        />
       </Wrapper>
     </>
   );
diff --git a/src/constants/app.js b/src/constants/app.js
index 73787ab..d896fca 100644
--- a/src/constants/app.js
+++ b/src/constants/app.js
@@ -1,5 +1,5 @@
 export const HEADER_HEIGHT = 90;
-export const MOBILE_HEADER_HEIGHT = 40;
+export const MOBILE_HEADER_HEIGHT = 60;
 export const MOBILE_WIDTH = 800;
 export const MAIN_AREA_DESKTOP_HEIGHT = 645;
 export const MAIN_AREA_MOBILE_HEIGHT = 500;
diff --git a/src/global.css b/src/global.css
index 5974ffe..869b611 100644
--- a/src/global.css
+++ b/src/global.css
@@ -16,9 +16,9 @@ body {
   -webkit-box-sizing: border-box;
   -webkit-touch-callout: none;
   -webkit-user-select: none;
-   -khtml-user-select: none; 
-     -moz-user-select: none; 
-      -ms-user-select: none; 
+   -khtml-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
           user-select: none;
 }
 
diff --git a/src/images/close.svg b/src/images/close.svg
new file mode 100644
index 0000000..5f1e5f4
--- /dev/null
+++ b/src/images/close.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="34" height="34" viewBox="0 0 34 34">
+    <g fill="none" fill-rule="nonzero">
+        <path d="M0 0h34v34H0z"/>
+        <path fill="#282625" d="M9.897 23.01L23.01 9.897a.773.773 0 0 1 1.093 1.093L10.99 24.103a.773.773 0 0 1-1.093-1.093z"/>
+        <path fill="#282625" d="M10.99 9.897L24.103 23.01a.773.773 0 0 1-1.093 1.093L9.897 10.99a.773.773 0 0 1 1.093-1.093z"/>
+    </g>
+</svg>
diff --git a/src/images/menu-mobile.svg b/src/images/menu-mobile.svg
new file mode 100644
index 0000000..00caea3
--- /dev/null
+++ b/src/images/menu-mobile.svg
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16 16" version="1.1" width="32px" height="32px">
+<g id="surface1">
+<path style=" " d="M 1 2 L 1 3 L 14 3 L 14 2 Z M 1 7 L 1 8 L 14 8 L 14 7 Z M 1 12 L 1 13 L 14 13 L 14 12 Z "/>
+</g>
+</svg>
diff --git a/src/images/menu.svg b/src/images/menu.svg
new file mode 100644
index 0000000..fd6e253
--- /dev/null
+++ b/src/images/menu.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/></svg>
\ No newline at end of file
diff --git a/src/images/menu_mobile_icon.svg b/src/images/menu_mobile_icon.svg
new file mode 100644
index 0000000..b86e9de
--- /dev/null
+++ b/src/images/menu_mobile_icon.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" width="30px" height="30px">
+    <path style="line-height:normal;text-indent:0;text-align:start;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000;text-transform:none;block-progression:tb;isolation:auto;mix-blend-mode:normal" d="M 3 7 A 1.0001 1.0001 0 1 0 3 9 L 27 9 A 1.0001 1.0001 0 1 0 27 7 L 3 7 z M 3 14 A 1.0001 1.0001 0 1 0 3 16 L 27 16 A 1.0001 1.0001 0 1 0 27 14 L 3 14 z M 3 21 A 1.0001 1.0001 0 1 0 3 23 L 27 23 A 1.0001 1.0001 0 1 0 27 21 L 3 21 z" font-weight="400" font-family="sans-serif" white-space="normal" overflow="visible"/>
+</svg>
diff --git a/src/images/tangerine-logo.svg b/src/images/tangerine-logo.svg
new file mode 100644
index 0000000..17b172e
--- /dev/null
+++ b/src/images/tangerine-logo.svg
@@ -0,0 +1,22 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="170" height="34" viewBox="0 0 170 34">
+    <defs>
+        <linearGradient id="a" x1="67.169%" x2="38.431%" y1="70.888%" y2="12.173%">
+            <stop offset="0%" stop-color="#F27038"/>
+            <stop offset="100%" stop-color="#C45B26"/>
+        </linearGradient>
+        <linearGradient id="b" x1="6.418%" x2="114.19%" y1="77.576%" y2="0%">
+            <stop offset="0%" stop-color="#F27038"/>
+            <stop offset="100%" stop-color="#F4B544"/>
+        </linearGradient>
+        <linearGradient id="c" x1="43.057%" x2="56.779%" y1="0%" y2="100%">
+            <stop offset="0%" stop-color="#1AB381"/>
+            <stop offset="100%" stop-color="#008D5F"/>
+        </linearGradient>
+    </defs>
+    <g fill="none" fill-rule="evenodd">
+        <path fill="url(#a)" d="M29.773 25.81c-4.384 7.546-14.066 10.148-21.625 5.812C.59 27.285-1.983 17.652 2.401 10.104c4.384-7.546 7.583.75 15.142 5.087 7.559 4.337 16.614 3.072 12.23 10.618z" transform="rotate(-9 15.246 17.614)"/>
+        <path fill="url(#b)" d="M6.243 30.776c-7.104-5.323 2.085-7.708 7.439-14.772C19.035 8.939 18.525-.13 25.629 5.194c7.104 5.323 8.524 15.365 3.17 22.43-5.353 7.064-15.452 8.476-22.556 3.152z" transform="rotate(-9 15.012 17.812)"/>
+        <path fill="url(#c)" d="M12.733 0c.172.09.342.19.508.297 2.757 1.79 3.599 5.388 1.88 8.035-.15.23-.314.446-.49.646a6.273 6.273 0 0 1-.509-.297c-2.757-1.79-3.599-5.388-1.88-8.034.15-.23.314-.446.49-.647z" transform="rotate(-10 15.303 17.888)"/>
+        <path fill="#282625" fill-rule="nonzero" d="M44.445 23H42.3v-8.13h-2.925v-1.875h7.98v1.875h-2.91V23zm9.729 0h-1.92v-.93c-.57.72-1.35 1.11-2.235 1.11-1.815 0-3.21-1.38-3.21-3.81 0-2.355 1.365-3.795 3.21-3.795.855 0 1.65.36 2.235 1.11v-.93h1.92V23zm-3.555-1.515c.63 0 1.32-.345 1.635-.825v-2.55c-.315-.48-1.005-.84-1.635-.84-1.095 0-1.845.855-1.845 2.1 0 1.26.75 2.115 1.845 2.115zM62.942 23h-1.92v-4.38c0-1.005-.525-1.35-1.335-1.35-.75 0-1.32.42-1.65.84V23h-1.905v-7.245h1.905v.93c.465-.54 1.365-1.11 2.535-1.11 1.605 0 2.37.9 2.37 2.31V23zm4.914 2.94c-1.23 0-2.205-.285-3.12-1.08l.855-1.365c.585.63 1.365.885 2.265.885.915 0 2.01-.39 2.01-1.86v-.705c-.57.72-1.35 1.125-2.25 1.125-1.8 0-3.195-1.26-3.195-3.675 0-2.37 1.365-3.69 3.195-3.69.87 0 1.665.36 2.25 1.11v-.93h1.905v6.765c0 2.745-2.13 3.42-3.915 3.42zm.375-4.68c.615 0 1.305-.36 1.635-.825V18.08c-.33-.465-1.02-.81-1.635-.81-1.095 0-1.845.75-1.845 1.995s.75 1.995 1.845 1.995zm8.903 1.92c-2.205 0-3.87-1.485-3.87-3.81 0-2.1 1.56-3.795 3.75-3.795 2.175 0 3.63 1.62 3.63 3.975V20h-5.385c.135.885.855 1.62 2.085 1.62.615 0 1.455-.255 1.92-.705l.855 1.26c-.72.66-1.86 1.005-2.985 1.005zm1.68-4.5c-.06-.69-.54-1.545-1.8-1.545-1.185 0-1.695.825-1.77 1.545h3.57zM83.998 23h-1.905v-7.245h1.905v.975c.525-.63 1.41-1.155 2.31-1.155v1.86c-.135-.03-.3-.045-.525-.045-.63 0-1.47.36-1.785.825V23zm4.508-8.025c-.615 0-1.125-.51-1.125-1.14 0-.63.51-1.125 1.125-1.125.63 0 1.14.495 1.14 1.125s-.51 1.14-1.14 1.14zm.96 8.025h-1.905v-7.245h1.905V23zm8.769 0h-1.92v-4.38c0-1.005-.525-1.35-1.335-1.35-.75 0-1.32.42-1.65.84V23h-1.905v-7.245h1.905v.93c.465-.54 1.365-1.11 2.535-1.11 1.605 0 2.37.9 2.37 2.31V23zm5.348.18c-2.205 0-3.87-1.485-3.87-3.81 0-2.1 1.56-3.795 3.75-3.795 2.175 0 3.63 1.62 3.63 3.975V20h-5.385c.135.885.855 1.62 2.085 1.62.615 0 1.455-.255 1.92-.705l.855 1.26c-.72.66-1.86 1.005-2.985 1.005zm1.68-4.5c-.06-.69-.54-1.545-1.8-1.545-1.185 0-1.695.825-1.77 1.545h3.57zM121.465 23h-2.055l-4.77-6.525V23h-2.13V12.995h2.19l4.635 6.285v-6.285h2.13V23zm5.409.18c-2.205 0-3.87-1.485-3.87-3.81 0-2.1 1.56-3.795 3.75-3.795 2.175 0 3.63 1.62 3.63 3.975V20h-5.385c.135.885.855 1.62 2.085 1.62.615 0 1.455-.255 1.92-.705l.855 1.26c-.72.66-1.86 1.005-2.985 1.005zm1.68-4.5c-.06-.69-.54-1.545-1.8-1.545-1.185 0-1.695.825-1.77 1.545h3.57zm5.708 4.5c-1.335 0-2.04-.69-2.04-1.995V17.42h-1.2v-1.665h1.2v-1.98h1.905v1.98h1.47v1.665h-1.47v3.255c0 .465.24.81.66.81.285 0 .555-.105.66-.225l.405 1.455c-.285.255-.795.465-1.59.465zm11.109-.18h-2.04l-1.53-4.935L140.27 23h-2.04l-2.205-7.245h1.98l1.35 4.875 1.59-4.875h1.695l1.59 4.875 1.35-4.875h1.995L145.37 23zm6.578.18c-2.385 0-3.825-1.755-3.825-3.81s1.44-3.795 3.825-3.795c2.4 0 3.84 1.74 3.84 3.795 0 2.055-1.44 3.81-3.84 3.81zm0-1.695c1.2 0 1.86-.975 1.86-2.115 0-1.125-.66-2.1-1.86-2.1-1.185 0-1.845.975-1.845 2.1 0 1.14.66 2.115 1.845 2.115zM159.188 23h-1.905v-7.245h1.905v.975c.525-.63 1.41-1.155 2.31-1.155v1.86c-.135-.03-.3-.045-.525-.045-.63 0-1.47.36-1.785.825V23zm10.643 0h-2.385l-1.92-2.79-.87.93V23h-1.905V12.995h1.905v5.985l2.745-3.225h2.34l-2.865 3.285 2.955 3.96z"/>
+    </g>
+</svg>
diff --git a/src/pages/index.js b/src/pages/index.js
index 87c4524..7f05acb 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -22,12 +22,15 @@ const CIRCLE_SHADOW = '0 0 10px 2px rgba(255, 255, 0, 0.5)';
 const rotate = keyframes`
   0% {
     transform: scale(1, 0.8) skew(0deg, 0deg);
+    -webkit-transform: scale(1, 0.8) skew(0deg, 0deg);
   }
   50% {
     transform: scale(1, 1.1) skew(-10deg, 0deg);
+    -webkit-transform: scale(1, 1.1) skew(-10deg, 0deg);
   }
   100% {
     transform: scale(1, 0.8) skew(0deg, 0deg);
+    -webkit-transform: scale(1, 0.8) skew(0deg, 0deg);
   }
 `;
 
@@ -36,7 +39,7 @@ const ChainLine = styled.img`
   position: absolute;
   width: 110%;
   top: 50px;
-  animation: ${rotate} 8s ease-in-out infinite;
+  animation: ${rotate} 6s ease-in-out infinite;
   @media screen and (max-width: 1300px) {
     width: 120%;
     top: 180px;
@@ -167,6 +170,7 @@ const IndexPage = React.memo(({ pathContext: { locale } }) => {
       <Sections>
         <Section><PartnerList /></Section>
         <Section
+          id="technology"
           title={
             <FormattedMessage
               id="Technology"
diff --git a/src/translations/zh-Hant.json b/src/translations/zh-Hant.json
index 16f1a48..923be07 100644
--- a/src/translations/zh-Hant.json
+++ b/src/translations/zh-Hant.json
@@ -1,6 +1,6 @@
 {
   "Tangerine Network": "橘子區塊鏈",
-  "tangerine-description": "橘子區塊鏈是一個分散式帳本技術 that 解決了其他區塊鏈怪怪的地方",
+  "tangerine-description": "橘子區塊鏈是一個分散式帳本技術 which 解決了其他區塊鏈怪怪的地方",
   "Language": "語言",
   "Technology": "技術",
   "Team": "團隊",