Add nav bar and header

next.config.js

@@ -1,12 +1,14 @@
 const withPlugins = require("next-compose-plugins");
 const withCSS = require("@zeit/next-css");
 const withSass = require("@zeit/next-sass");
+const withSvgr = require("next-svgr");
 const withBundleAnalyzer = require("@zeit/next-bundle-analyzer");
 const nextRuntimeDotenv = require("next-runtime-dotenv");
 
 const withConfig = nextRuntimeDotenv({ public: ["API_URL", "API_KEY"] });
 
 const nextConfig = {
+
     analyzeServer: ["server", "both"].includes(process.env.BUNDLE_ANALYZE),
     analyzeBrowser: ["browser", "both"].includes(process.env.BUNDLE_ANALYZE),
     bundleAnalyzerConfig: {
@@ -28,5 +30,5 @@ const nextConfig = {
 };
 
 module.exports = withConfig(
-    withPlugins([[withCSS], [withSass], [withBundleAnalyzer]], nextConfig)
+    withPlugins([[withCSS], [withSass], [withSvgr], [withBundleAnalyzer]], nextConfig)
 );

package.json

@@ -38,9 +38,11 @@
     "next-redux-wrapper": "^3.0.0",
     "next-routes": "^1.4.2",
     "next-runtime-dotenv": "^1.2.0",
+    "next-svgr": "0.0.2",
     "node-sass": "^4.14.1",
     "query-string": "^6.8.3",
     "react": "^16.13.1",
+    "react-burger-menu": "^2.6.15",
     "react-dom": "^16.13.1",
     "react-redux": "^7.1.1",
     "redux": "^4.0.4",

pages/home/index.tsx

@@ -6,18 +6,9 @@ import { useSelector, useDispatch } from "react-redux";
 
 // #region Local Imports
 import { withTranslation } from "@Server/i18n";
-import {
-    Container,
-    Top,
-    TopText,
-    Middle,
-    MiddleLeft,
-    MiddleLeftButtons,
-    MiddleRight,
-} from "@Styled/Home";
 import { IStore } from "@Redux/IStore";
 import { HomeActions } from "@Actions";
-import { Heading, LocaleButton } from "@Components";
+import { Header, Navbar } from "@Components";
 import Embark from "../../src/Components/Blogs/Embark"
 import Nimbus from "../../src/Components/Blogs/Nimbus"
 // #endregion Local Imports
@@ -31,10 +22,12 @@ const Home: NextPage<IHomePage.IProps, IHomePage.InitialProps> = () => {
     const dispatch = useDispatch();
 
     return (
-        <Container>
+        <>
+            <Navbar/>
+            <Header/>
             <Embark/>
             <Nimbus/>
-        </Container>
+        </>
     );
 };
 

public/static/css/main.scss

@@ -1 +1,27 @@
 @import "./bootstrap/index";
+
+*:focus {
+    outline: none !important;
+}
+
+a {
+    text-decoration: none !important;
+}
+
+li {
+    list-style: none;
+}
+
+.pt-150{
+    padding-top: 150px;
+}
+
+.mb-50{
+    margin-bottom: 50px;
+}
+
+@media (min-width: 1200px) {
+    .container {
+        max-width: 1140px;
+    }
+}

public/static/images/newsfeed.svg

@@ -0,0 +1,3 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M3.21429 0C1.43893 0 0 1.43893 0 3.21429C0 4.98964 1.43893 6.42857 3.21429 6.42857C14.4396 6.42857 23.5714 15.5604 23.5714 26.7857C23.5714 28.5611 25.0104 30 26.7857 30C28.5611 30 30 28.5611 30 26.7857C30 12.0161 17.9839 0 3.21429 0ZM4.28571 21.4286C1.91893 21.4286 0 23.3475 0 25.7143C0 28.0811 1.91893 30 4.28571 30C6.6525 30 8.57143 28.0811 8.57143 25.7143C8.57143 23.3475 6.6525 21.4286 4.28571 21.4286ZM0 13.9286C0 12.1532 1.43893 10.7143 3.21429 10.7143C12.0761 10.7143 19.2857 17.9239 19.2857 26.7857C19.2857 28.5611 17.8468 30 16.0714 30C14.2961 30 12.8571 28.5611 12.8571 26.7857C12.8571 21.4693 8.53179 17.1429 3.21429 17.1429C1.43893 17.1429 0 15.7039 0 13.9286Z" fill="#4360DF"/>
+</svg>

src/Components/Header/Heading.d.ts

@@ -1,6 +1,6 @@
 declare namespace IHeading {
     export interface IProps {
-        text: string;
+
     }
 }
 

src/Components/Header/index.tsx

@@ -0,0 +1,40 @@
+// #region Global Imports
+import React, { useState } from "react";
+// #endregion Global Imports
+
+// #region Local Imports
+import "./style.scss";
+// #endregion Local Imports
+
+// #region Interface Imports
+import { IHeading } from "./Heading";
+// #endregion Interface Imports
+
+const Header: React.FunctionComponent<IHeading.IProps> = (): JSX.Element => {
+
+    const [active, setActive] = useState<Number>(0);
+
+
+    return (
+        <section className="intro intro-news">
+            <div className="container">
+                <div className="row">
+                    <div className="col-md-12">
+                        <div className="inner pt-150">
+                            <h1 className="mb-50">Tutorials</h1>
+                            <h3 className="teaser-1">                        
+                                The Status Network Tutorial Archive
+                            </h3>
+                            <ul className="filters">
+                                <li><a href="#" className={active === 0 ? "active" : ''} onClick={() => setActive(0)}>Embark</a></li>
+                                <li><a href="#" className={active === 1 ? "active" : ''} onClick={() => setActive(1)}>Nimbus</a></li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>        
+    );
+};
+
+export { Header };

src/Components/Header/style.scss

@@ -0,0 +1,76 @@
+.intro{
+    padding-bottom: 80px;
+    position: relative;
+    overflow: hidden;
+    h1{
+        font-size: 3.875rem;
+        line-height: 3.875rem;
+        font-weight: bold;
+        color: black;
+    }
+    .floating-logo{
+        position: absolute;
+        left: 60%;
+        bottom: -150px;
+        z-index: -1;
+    }
+    .status-h1{
+        display: flex;
+        align-items: center;
+        svg{
+            margin-right: 20px;
+        }
+    }
+}
+
+ul {
+    padding-left: 0 !important;
+}
+
+li {
+}
+
+.intro-news{
+    .inner{
+        .teaser-1{
+            margin-bottom: 0;
+            .link-arrow{
+                font-size: 2.375rem;
+                line-height: 3rem;
+                font-weight: 400;
+            }
+        }
+        .filters{
+            margin-top: 120px;
+            display: flex;
+            align-items: center;
+            border-bottom: 2px solid #E1E1E1;
+            padding-bottom: 40px;
+            li{
+                margin-right: 40px;
+                a.active{
+                    color: #4360DF;
+                }
+                a{
+                    padding: 15px 12px;
+                    font-size: 1.25rem;
+                    color: grey;
+                    font-weight: 600;
+                }
+            }
+            li:last-child{
+                margin-right: 0;
+            }
+        }
+    }
+}
+
+a.active{
+    font-size: 1.25rem;
+    font-weight: 600;
+    color: #4360DF;
+    background: rgba(67, 96, 223, 0.1);
+    padding: 15px 12px;
+    border-radius: 10px;
+    display: inline-block;
+}

src/Components/Heading/index.tsx

@@ -1,26 +0,0 @@
-// #region Global Imports
-import * as React from "react";
-// #endregion Global Imports
-
-// #region Local Imports
-import "./style.scss";
-// #endregion Local Imports
-
-// #region Interface Imports
-import { IHeading } from "./Heading";
-// #endregion Interface Imports
-
-const Heading: React.FunctionComponent<IHeading.IProps> = (
-    props
-): JSX.Element => {
-    const { text } = props;
-
-    return (
-        <div className="title">
-            <span className="title__back">{text}</span>
-            <span className="title__front">{text}</span>
-        </div>
-    );
-};
-
-export { Heading };

src/Components/Heading/style.scss

@@ -1,31 +0,0 @@
-.title {
-    font-family: Arial, Helvetica, sans-serif;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    position: relative;
-    z-index: 1;
-    text-align: center;
-    &__back {
-        color: rgba(255, 255, 255, 0.15);
-        font-size: 140px;
-        font-weight: 800;
-        line-height: 86px;
-    }
-
-    &__front {
-        color: #ffffff;
-        font-size: 80px;
-        font-weight: 500;
-        position: absolute;
-    }
-    &--contact {
-        .title__back {
-            font-size: 70px;
-        }
-        .title__front {
-            font-size: 38px;
-        }
-    }
-}

src/Components/Navbar/index.tsx

@@ -1,9 +1,39 @@
-import * as React from "react";
-
+import React, { useState } from 'react';
 import { INavbar } from "./Navbar";
+import { slide as Menu } from 'react-burger-menu';
+import "./style.scss";
+import StatusNetwork from '../../../public/static/images/status-network-logo.svg';
 
 const Navbar: React.FunctionComponent<INavbar.IProps> = (): JSX.Element => {
-    return <div className="navbar">Navbar</div>;
+
+    const [isOpen, setIsOpen] = useState(false)
+
+    const closeNav = () => {
+      setIsOpen(false)
+    }
+
+    return (
+        <>
+            <nav id="nav">
+                <div className='logo-container' >
+                    <a href=".">
+                       <StatusNetwork/>
+                    </a>
+                </div >
+                <Menu right disableAutoFocus pageWrapId={ "nav" } outerContainerId={ "main" } isOpen={ isOpen } >
+                    <a href="https://statusnetwork.com/" target="_blank" rel="noopener noreferrer" onClick={closeNav}>
+                        About us
+                    </a>
+                    <a href="https://github.com/status-im" target="_blank" rel="noopener noreferrer" onClick={closeNav}>
+                        Github
+                    </a>
+                    <a href="https://our.status.im/" target="_blank" rel="noopener noreferrer" onClick={closeNav}>
+                        Blog
+                    </a>
+                </Menu>
+            </nav>
+        </>
+    )
 };
 
 export { Navbar };

src/Components/Navbar/style.scss

@@ -0,0 +1,194 @@
+/*------------- NAVIGATION BAR -------------------*/
+
+.logo-container {
+    margin: 30px 45px;
+  }
+  
+  .logo {
+    width: 250px;
+    height: auto;
+    margin-left: 50px;
+  }
+  
+  .bm-menu {
+    background: #525252 !important;
+    height: 380px !important;
+  }
+  .bm-menu a {
+    color: #b8b7ad;
+  }
+  .bm-menu a:hover {
+    color: #ffffff;
+    font-weight: 900;
+  }
+  
+  .bm-item-list {
+    height: 50% !important;
+  }
+  
+  .bm-item-list a {
+    padding: 0.8em;
+    text-decoration: none;
+  }
+  .bm-item-list a span {
+    margin-left: 10px;
+    font-weight: 700;
+  }
+  .bm-item:focus {
+    outline: none;
+  }
+  
+  /* Position and sizing of burger button */
+  .bm-burger-button {
+    position: absolute;
+    width: 30px;
+    height: 25px;
+    right: 60px;
+    top: 36px;
+  }
+  /* Color/shape of burger icon bars */
+  .bm-burger-bars {
+    background: #4d4d4d;
+  }
+  
+  /* Color/shape of burger icon bars on hover*/
+  .bm-burger-bars-hover {
+    background: #949494;
+  }
+  
+  /* Position and sizing of clickable cross button */
+  .bm-cross-button {
+    height: 24px;
+    width: 24px;
+  }
+  
+  /* Color/shape of close button cross */
+  .bm-cross {
+    background: #bdc3c7;
+  }
+  
+  /*
+  Sidebar wrapper styles
+  Note: Beware of modifying this element as it can break the animations - you should not need to touch it in most cases
+  */
+  .bm-menu-wrap {
+    position: fixed;
+    height: 100%;
+  }
+  
+  /* General sidebar styles */
+  .bm-menu {
+    background: #373a47;
+    padding: 2.5em 1.5em 0;
+    font-size: 1.15em;
+  }
+  
+  /* Morph shape necessary with bubble or elastic */
+  .bm-morph-shape {
+    fill: #373a47;
+  }
+  
+  /* Wrapper for item list */
+  .bm-item-list {
+    color: #b8b7ad;
+    padding: 0.8em;
+  }
+  
+  /* Individual item */
+  .bm-item {
+    display: inline-block;
+  }
+  
+  /* Styling of overlay */
+  .bm-overlay {
+    background: rgba(0, 0, 0, 0.3);
+    top: 0px;
+  }
+  
+  .button {
+    margin: 20px;
+    font-size: 1rem;
+    padding: 6px 20px;
+    cursor: pointer;
+    overflow: visible;
+    text-decoration: none;
+    white-space: nowrap;
+    color: #ffffff;
+    border-radius: 10px;
+    border-color: rgb(173, 173, 173);
+    border-style: solid;
+    background-color: rgb(173, 173, 173);
+  }
+  
+  .button:hover {
+    background-color: rgb(121, 121, 121);
+    border-color: rgb(121, 121, 121);
+    border-style: solid;
+  }
+  
+  nav img {
+    width: 6rem;
+  }
+  
+  nav ul {
+    width: 100%;
+    display: grid;
+    list-style: none;
+    align-items: center;
+    padding: 0;
+    margin: 0;
+  }
+  
+  nav ul:first-of-type{
+    grid-template-columns: 1fr;
+  }
+  
+  nav ul:first-of-type li{
+    font-size: 1.4rem;
+    font-weight: bold;
+    text-indent: 30px;
+  }
+  
+  nav ul:first-of-type li span {
+    font-weight: 500;
+    color: #444;
+  }
+  
+  nav ul:last-of-type{
+    grid-template-columns: repeat(3, 1fr);
+  
+  }
+  
+  nav ul li a, nav ul li a:visited{
+    color:#111;
+    text-decoration: none; 
+    font-weight: bold;
+    display: block;
+  }
+  
+  li.dropdown {
+    display: inline-block;
+  }
+  
+  .dropdown-content {
+    display: none;
+    position: absolute;
+    background-color: #f9f9f9;
+    min-width: 160px;
+    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+    z-index: 1;
+  }
+  
+  .dropdown-content a {
+    color: black;
+    padding: 12px 16px;
+    text-decoration: none;
+    display: block;
+    text-align: left;
+  }
+  
+  .dropdown-content a:hover {background-color: #f1f1f1;}
+  
+  .dropdown:hover .dropdown-content {
+    display: block;
+  }

src/Components/index.ts

@@ -1,5 +1,5 @@
 export { Layout } from "@Components/Layout";
 export { Navbar } from "@Components/Navbar";
 export { Footer } from "@Components/Footer";
-export { Heading } from "@Components/Heading";
+export { Header } from "@Components/Header";
 export { LocaleButton } from "@Components/LocaleButton";