PageHeader for PC

package.json

@@ -6,10 +6,13 @@
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
+    "bootstrap": "^4.6.0",
     "history": "^5.0.0",
     "i18next": "^19.9.1",
     "i18next-browser-languagedetector": "^6.0.1",
+    "node-sass": "^5.0.0",
     "react": "^17.0.1",
+    "react-bootstrap": "^1.5.1",
     "react-dom": "^17.0.1",
     "react-i18next": "^11.8.9",
     "react-router-dom": "^5.2.0",

src/App.js

@@ -1,5 +1,5 @@
-import './App.css';
-import Routes from './Routes'
+import './App.scss';
+import Routes from './Routes';
 
 function App() {
   return (

src/App.scss

@@ -0,0 +1,63 @@
+@import "~bootstrap/scss/bootstrap";
+
+.App {
+  text-align: center;
+  background-image: url(./style/img/background.png);
+  min-height: 100vh;
+}
+
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@font-face {
+  font-family: Rajdhani;
+  src: url('./style/font/Rajdhani-Medium.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: Rajdhani;
+  src: url('./style/font/Rajdhani-SemiBold.ttf') format('truetype');
+  font-weight: bold;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: Rajdhani;
+  src: url('./style/font/Rajdhani-Bold.ttf') format('truetype');
+  font-weight: 600;
+  font-style: normal;
+}

src/components/PageHeader/PageHeader.js

@@ -0,0 +1,70 @@
+import { useTranslation } from 'react-i18next';
+import {
+    Container, Row, Col,
+    Navbar, Nav, NavDropdown
+} from 'react-bootstrap';
+
+import styles from './style.module.scss';
+import pageLogo from './img/logo-page.png';
+import pageLangImg from './img/lang.png';
+
+const PageHeader = () => {
+    const { t, i18n } = useTranslation();
+
+    const handleClickChangeLng = lng => {
+        i18n.changeLanguage(lng);
+        localStorage.setItem("lng", lng);
+
+        let app = document.getElementsByTagName('body')[0];
+        if (lng === 'zh-cn') {
+            app.setAttribute('class', 'zh-font');
+        } else {
+            app.setAttribute('class', '');
+        }
+    };
+
+    return (
+        <div className={styles.headerContainer}>
+            <Container>
+                <Row>
+                    <Col
+                        xs={4}
+                        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 }}
+                        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">
+                                <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>
+                                        <NavDropdown id="basic-nav-dropdown" className={styles.pageLang}
+                                            title={<>
+                                                <img alt='page lang' src={pageLangImg} className={styles.pageLangImg} />
+                                                <span className={styles.pageLangWord}>{t('header:lang_demo')}</span>
+                                            </>}
+                                        >
+                                            <NavDropdown.Item onClick={() => handleClickChangeLng('en-us')} eventKey="4.1" >{t('header:en')}</NavDropdown.Item>
+                                            <NavDropdown.Item onClick={() => handleClickChangeLng('zh-cn')} eventKey="4.2" >{t('header:zh')}</NavDropdown.Item>
+                                        </NavDropdown>
+                                    </div>
+                                </Nav>
+                            </Navbar.Collapse>
+                        </Navbar>
+                    </Col>
+                </Row>
+            </Container>
+        </div>
+    )
+};
+
+export default PageHeader;

src/components/PageHeader/index.js

@@ -0,0 +1,5 @@
+import PageHeader from './PageHeader'
+
+export {
+    PageHeader
+}

src/components/PageHeader/style.module.scss

@@ -0,0 +1,89 @@
+.headerContainer {
+  .pageLogo {
+    width: 180px;
+    height: 40px;
+  }
+}
+
+// PC
+@media (min-width: 576px) {
+  .headerContainer {
+
+    // for debug
+    // border: 1px solid red;
+
+    .pageLogo {
+      width: 238px;
+      height: 53px;
+      line-height: 22px;
+      margin: 5px 10px;
+    }
+
+    .navBar {
+      background: transparent !important;
+
+      .navigators {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+
+      .pageDocs {
+        // width: 37px;
+        // height: 20px;
+        font-size: 16px;
+        font-family: IBMPlexSans-Medium, IBMPlexSans;
+        font-weight: 500;
+        color: #6330DD;
+        line-height: 20px;
+        margin: 5px 10px;
+      }
+
+      .pageGithub {
+        // width: 50px;
+        // height: 20px;
+        font-size: 16px;
+        font-family: IBMPlexSans-Medium, IBMPlexSans;
+        font-weight: 500;
+        color: #6330DD;
+        line-height: 20px;
+        margin: 5px 10px;
+      }
+
+      .pageWhitePaper {
+        // width: 48px;
+        // height: 22px;
+        font-size: 16px;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 500;
+        color: #6330DD;
+        line-height: 22px;
+        margin: 5px 10px;
+      }
+
+      .pageLang {
+        // width: 65px;
+        // height: 30px;
+        border-radius: 4px;
+        border: 1px solid #6330DD;
+        line-height: 22px;
+        margin: 5px 10px;
+      }
+      .pageLangImg {
+        width: 22px;
+        height: 22px;
+        margin-right: 5px;
+      }
+      .pageLangWord {
+        width: 17px;
+        height: 18px;
+        font-size: 14px;
+        font-family: IBMPlexSans-SemiBold, IBMPlexSans;
+        font-weight: 600;
+        color: #6330DD;
+        line-height: 18px;
+      }
+    }
+  }
+}

src/locales/en-us.json

@@ -1 +1,10 @@
-{}
+{
+    "header": {
+        "docs": "Docs",
+        "github": "Github",
+        "whitepaper": "WhitePaper",
+        "lang_demo": "EN",
+        "en": "English",
+        "zh": "简体中文"
+    }
+}

src/locales/zh-cn.json

@@ -1 +1,10 @@
-{}
+{
+    "header": {
+        "docs": "文档",
+        "github": "Github",
+        "whitepaper": "白皮书",
+        "lang_demo": "CN",
+        "en": "English",
+        "zh": "简体中文"
+    }
+}

src/page/Home/index.js

@@ -1,6 +1,10 @@
+import { PageHeader } from '../../components/PageHeader';
+
 const Home = () => {
     return (
-        <div>Home</div>
+        <div>
+            <PageHeader />
+        </div>
     )
 };