PageHeader mobile

darwinia-network · Mar 11, 2021 · 48d9329 · 48d9329
1 parent e196c7b
commit 48d9329
Show file tree

Hide file tree

Showing 9 changed files with 335 additions and 15 deletions.
diff --git a/package.json b/package.json
@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
+    "antd": "^4.13.1",
     "bootstrap": "^4.6.0",
     "history": "^5.0.0",
     "i18next": "^19.9.1",

diff --git a/src/App.scss b/src/App.scss
@@ -1,4 +1,5 @@
 @import "~bootstrap/scss/bootstrap";
+@import '~antd/dist/antd.css';
 
 .App {
   text-align: center;
@@ -36,6 +37,7 @@
   from {
     transform: rotate(0deg);
   }
+
   to {
     transform: rotate(360deg);
   }
@@ -61,3 +63,30 @@
   font-weight: 600;
   font-style: normal;
 }
+
+.navbar-toggler {
+  border: none;
+}
+
+.navbar-light .navbar-toggler-icon {
+  color: #000
+}
+
+.cs-header .dropdown-toggle::after {
+  display: none;
+}
+
+.navbar-light .navbar-toggler-icon {
+  background: url("./style/img/navbar-toggler-icon.png") top center no-repeat;
+  background-size: 22px 19px;
+  width: 22px;
+  height: 19px;
+}
+
+.btn-light {
+  background: transparent;
+}
+
+.btn-light:active, .btn-light:hover, .btn-light:focus {
+  background: transparent;
+}
diff --git a/src/components/PageHeader/PageHeader.js b/src/components/PageHeader/PageHeader.js
@@ -1,15 +1,68 @@
+import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import {
+    Button,
     Container, Row, Col,
     Navbar, Nav, NavDropdown
 } from 'react-bootstrap';
+import { Drawer } from 'antd';
 
 import styles from './style.module.scss';
 import pageLogo from './img/logo-page.png';
 import pageLangImg from './img/lang.png';
+import sideBarCloseImg from './img/sidebar-close.png';
+import sideBarLogo from './img/sidebar-logo.png';
+import sideBarLangImg from './img/sidebar-lang.png';
+
+const SideBar = ({ visible, onClose, onLngChange }) => {
+    const { t, i18n } = useTranslation();
+
+    const handleLngClick = () => {
+        if (i18n.language && i18n.language.toLowerCase() === 'en-us') {
+            onLngChange('zh-cn');
+        } else {
+            onLngChange('en-us');
+        }
+    }
+
+    return (
+        <div id="basic-navbar-nav">
+            <Drawer
+                drawerStyle={{ background: 'linear-gradient(315deg, #FF0050 0%, #7000FF 71%, #0027FF 100%)' }}
+                placement="right"
+                onClose={onClose}
+                visible={visible}
+                closeIcon={<img alt='close sidebar' src={sideBarCloseImg} style={{ width: '16.73px', height: '16.73px' }} />}
+            >
+                <div className={styles.sideBarSpace}></div>
+                <div className={styles.sideBarContent}>
+                    <img alt='sidebar logo' src={sideBarLogo} />
+                    <div className={styles.sideBarLink}>
+                        <Nav.Link href='/' className={styles.sideBarDocs} >{t('header:docs')}</Nav.Link>
+                        <Nav.Link href='/' className={styles.sideBarGithub} >{t('header:github')}</Nav.Link>
+                        <Nav.Link href='/' className={styles.sideBarWhitePaper} >{t('header:whitepaper')}</Nav.Link>
+                    </div>
+                    <Button variant="light" className={styles.sideBarLangBtn} onClick={handleLngClick}>
+                        <img alt='sidebar lang' src={sideBarLangImg} className={styles.sideBarLangImg} />
+                        <span className={styles.sideBarLangWord}>{t('header:lang_demo')}</span>
+                    </Button>
+                </div>
+            </Drawer>
+        </div>
+    )
+};
 
 const PageHeader = () => {
     const { t, i18n } = useTranslation();
+    const [visibleSideBar, setVisibleSideBar] = useState(false);
+
+    const handleCloseSideBar = () => {
+        setVisibleSideBar(false);
+    };
+
+    const handleClickShowSideBar = () => {
+        setVisibleSideBar(true);
+    };
 
     const handleClickChangeLng = lng => {
         i18n.changeLanguage(lng);
@@ -25,27 +78,28 @@ const PageHeader = () => {
 
     return (
         <div className={styles.headerContainer}>
+            <SideBar visible={visibleSideBar} onClose={handleCloseSideBar} onLngChange={handleClickChangeLng} />
             <Container>
-                <Row>
+                <Row style={{ display: 'flex', alignItems: 'center' }}>
                     <Col
-                        xs={4}
+                        xs={3}
                         sm={5}
                     >
                         <a target="_blank" rel="noopener noreferrer" href='/'>
                             <img alt='page logo' src={pageLogo} className={styles.pageLogo} />
                         </a>
                     </Col>
                     <Col
-                        xs={{ span: 6, offset: 2 }}
+                        xs={{ span: 3, offset: 6 }}
                         sm={{ span: 5, offset: 2 }}
                     >
-                        <Navbar bg="light" expand="sm" className={styles.navBar}>
-                            <Navbar.Toggle aria-controls="basic-navbar-nav" />
-                            <Navbar.Collapse id="basic-navbar-nav">
+                        <Navbar bg="white" expand="sm" className={`${styles.navBar} cs-header`}>
+                            <Navbar.Toggle aria-controls="basic-navbar-nav" onClick={handleClickShowSideBar} />
+                            <Navbar.Collapse className={'d-none d-sm-block'}>
                                 <Nav className={styles.navigators}>
-                                    <div><Nav.Link href="#todo" className={styles.pageDocs} >{t('header:docs')}</Nav.Link></div>
-                                    <div><Nav.Link href="#todo" className={styles.pageGithub} >{t('header:github')}</Nav.Link></div>
-                                    <div><Nav.Link href="#todo" className={styles.pageWhitePaper} >{t('header:whitepaper')}</Nav.Link></div>
+                                    <div><Nav.Link href="/" className={styles.pageDocs} >{t('header:docs')}</Nav.Link></div>
+                                    <div><Nav.Link href="/" className={styles.pageGithub} >{t('header:github')}</Nav.Link></div>
+                                    <div><Nav.Link href="/" className={styles.pageWhitePaper} >{t('header:whitepaper')}</Nav.Link></div>
                                     <div>
                                         <NavDropdown id="basic-nav-dropdown" className={styles.pageLang}
                                             title={<>

diff --git a/src/components/PageHeader/img/sidebar-close.png b/src/components/PageHeader/img/sidebar-close.png
diff --git a/src/components/PageHeader/img/sidebar-lang.png b/src/components/PageHeader/img/sidebar-lang.png
diff --git a/src/components/PageHeader/img/sidebar-logo.png b/src/components/PageHeader/img/sidebar-logo.png
diff --git a/src/components/PageHeader/style.module.scss b/src/components/PageHeader/style.module.scss
@@ -3,6 +3,82 @@
     width: 180px;
     height: 40px;
   }
+
+  .navBar {
+    background: transparent !important;
+  }
+}
+
+.sideBarSpace {
+  height: 10%;
+}
+
+.sideBarContent {
+  height: 90%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+
+  .sideBarLink {
+    height: 40%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+
+    .sideBarDocs {
+      // width: 49px;
+      // height: 27px;
+      font-size: 20px;
+      font-family: Eina01-SemiBold, Eina01;
+      font-weight: 600;
+      color: #FFFFFF;
+      line-height: 27px;
+    }
+
+    .sideBarGithub {
+      // width: 65px;
+      // height: 27px;
+      font-size: 20px;
+      font-family: Eina01-SemiBold, Eina01;
+      font-weight: 600;
+      color: #FFFFFF;
+      line-height: 27px;
+    }
+
+    .sideBarWhitePaper {
+      // width: 113px;
+      // height: 27px;
+      font-size: 20px;
+      font-family: Eina01-SemiBold, Eina01;
+      font-weight: 600;
+      color: #FFFFFF;
+      line-height: 27px;
+    }
+  }
+
+  .sideBarLangBtn {
+    width: 65px;
+    // height: 30px;
+    border-radius: 4px;
+    border: 1px solid #FEFEFF;
+    padding: 2px 0;
+
+    .sideBarLangImg {
+      margin-right: 5px;
+    }
+
+    .sideBarLangWord {
+      width: 17px;
+      height: 18px;
+      font-size: 14px;
+      font-family: IBMPlexSans-SemiBold, IBMPlexSans;
+      font-weight: 600;
+      color: #FFFFFF;
+      line-height: 18px;
+    }
+  }
 }
 
 // PC
@@ -20,8 +96,6 @@
     }
 
     .navBar {
-      background: transparent !important;
-
       .navigators {
         width: 100%;
         display: flex;
@@ -70,11 +144,13 @@
         line-height: 22px;
         margin: 5px 10px;
       }
+
       .pageLangImg {
         width: 22px;
         height: 22px;
         margin-right: 5px;
       }
+
       .pageLangWord {
         width: 17px;
         height: 18px;
@@ -86,4 +162,4 @@
       }
     }
   }
-}
+}
diff --git a/src/style/img/navbar-toggler-icon.png b/src/style/img/navbar-toggler-icon.png