From 2a6295eb66f11603b892750176cf99d4d369a166 Mon Sep 17 00:00:00 2001
From: Nistor Cristian <contact@nistorcristian.com>
Date: Thu, 4 Oct 2018 01:02:24 +0300
Subject: [PATCH] Responsive menu.

---
 themes/navy/layout/index.swig                 |  66 +----
 themes/navy/layout/partial/footer.swig        |   2 +-
 themes/navy/layout/partial/header.swig        | 133 +++++------
 themes/navy/layout/partial/mobile_nav.swig    |  41 ++--
 themes/navy/source/css/_partial/main.styl     | 225 ++++++++++++++----
 themes/navy/source/img/arrow.svg              |   3 +
 themes/navy/source/img/arrow_orange.svg       |   4 +
 themes/navy/source/img/close.svg              |   3 +
 .../img/graphic-friendly-beginnings.svg       |  14 ++
 themes/navy/source/img/graphic-licensing.svg  |  12 +
 themes/navy/source/img/graphic-network.svg    |  12 +
 .../source/img/graphic-platform-support.svg   |  25 ++
 themes/navy/source/img/graphic-research.svg   |  14 ++
 themes/navy/source/img/icon-github-mobile.svg |   1 +
 themes/navy/source/img/icon-gitter-mobile.svg |   3 +
 themes/navy/source/img/icon-menu.svg          |   3 +
 .../navy/source/img/icon-twitter-mobile.svg   |   1 +
 themes/navy/source/img/nimbus.svg             |   4 +
 themes/navy/source/js/mobile_nav.js           |  36 +--
 19 files changed, 391 insertions(+), 211 deletions(-)
 create mode 100644 themes/navy/source/img/arrow.svg
 create mode 100644 themes/navy/source/img/arrow_orange.svg
 create mode 100644 themes/navy/source/img/close.svg
 create mode 100644 themes/navy/source/img/graphic-friendly-beginnings.svg
 create mode 100644 themes/navy/source/img/graphic-licensing.svg
 create mode 100644 themes/navy/source/img/graphic-network.svg
 create mode 100644 themes/navy/source/img/graphic-platform-support.svg
 create mode 100644 themes/navy/source/img/graphic-research.svg
 create mode 100644 themes/navy/source/img/icon-github-mobile.svg
 create mode 100644 themes/navy/source/img/icon-gitter-mobile.svg
 create mode 100644 themes/navy/source/img/icon-menu.svg
 create mode 100644 themes/navy/source/img/icon-twitter-mobile.svg
 create mode 100644 themes/navy/source/img/nimbus.svg

diff --git a/themes/navy/layout/index.swig b/themes/navy/layout/index.swig
index 51b5443..b058776 100644
--- a/themes/navy/layout/index.swig
+++ b/themes/navy/layout/index.swig
@@ -1,69 +1,5 @@
 <div class="home-cover">
-    <div class="header">
-        <div class="header-left">
-            <div class="logo-wrap">
-                <span class="logo-span"><a class="logo" href="/"></a></span>
-                <span class="logo-span"><a class="logo-text" href="/">nimbus</a></span>
-            </div>
-            <header class="dropdown">
-                <nav>
-                    <ul>
-                        <li class="has-submenu">
-                            <a href="#">Status App</a>
-                            <div class="sub-menu">
-                                <ul>
-                                    <li><a href="https://status/im">About</a></li>
-                                    <li><a href="https://status.im">Features</a></li>
-                                    <li><a href="https://desktop.status.im">Desktop</a></li>
-                                    <li><a href="https://docs.status/im">Docs</a></li>
-                                    <li><a href="https://our.status/im">Blog</a></li>
-                                    <li><a href="https://people-ops.status.im/">Contribute</a></li>
-                                </ul>
-                            </div>
-                        </li>
-                        <li class="has-submenu">
-                            <a href="#">Embark</a>
-                            <div class="sub-menu">
-                                <ul>
-                                    <li><a href="https://embark.status.im">About</a></li>
-                                    <li><a href="https://embark.status.im/docs">Docs</a></li>
-                                    <li><a href="https://our.status.im/tag/embark">Blog</a></li>
-                                    <li><a href="https://gitter.im/embark-framework/Lobby">Contribute</a></li>
-                                </ul>
-                            </div>
-                        </li>
-                        <li><a href="https://our.status.im/tag/studio">Studio</a></li>
-                        <li><a href="https://status.im/incubate">Incubate</a></li>
-                        <li class="current has-submenu">
-                            <a href="/">Nimbus</a>
-                            <div class="sub-menu">
-                                <ul>
-                                    <li><a href="#">About</a></li>
-                                    <li><a href="/docs/">Docs</a></li>
-                                    <li><a href="https://our.status.im/tag/research">Blog</a></li>
-                                    <li><a href="https://gitter.im/status-im/nimbus">Contribute</a></li>
-                                </ul>
-                            </div>
-                        </li>
-                        <li><a href="https://our.status.im/tag/hardwallet">Hardwallet</a></li>
-                        <li><a href="https://our.status.im">Community</a></li>
-                    </ul>
-                </nav>
-            </header>
-        </div>
-        <div class="secondary-nav">
-            <div id="search-input-wrap">
-                <div id="search-input-icon">
-                    <i class="fa fa-search"></i>
-                </div>
-                <input type="search" id="search-input" placeholder="Search...">
-            </div>
-            <span><a href="http://get.status.im/chat/public/status" class="button button--secondary">Status Public Chat</a></span>
-            <span class="social-link social-link--twitter"><a href="https://twitter.com/ethstatus" target="_blank"></a></span>
-            <span class="social-link social-link--gitter"><a href="https://gitter.im/status-im/nimbus" target="_blank"></a></span>
-            <span class="social-link social-link--github"><a href="https://github.com/status-im" target="_blank"></a></span>
-        </div>
-    </div>
+     {{ partial('partial/header') }}
     <div class="intro">
         <h1>Nimbus</h1>
         <p>Nimbus is a research project and a client implementation for Ethereum 2.0 designed to perform well on embedded systems and personal mobile devices, including older smartphones with resource-restricted hardware.</p>
diff --git a/themes/navy/layout/partial/footer.swig b/themes/navy/layout/partial/footer.swig
index 828764d..a15a145 100644
--- a/themes/navy/layout/partial/footer.swig
+++ b/themes/navy/layout/partial/footer.swig
@@ -29,4 +29,4 @@
             </ul>
     </div>
     </div>
-</footer>
+</footer>
\ No newline at end of file
diff --git a/themes/navy/layout/partial/header.swig b/themes/navy/layout/partial/header.swig
index bd7e2d7..a5c98f8 100644
--- a/themes/navy/layout/partial/header.swig
+++ b/themes/navy/layout/partial/header.swig
@@ -1,78 +1,73 @@
-<div id="header" class="wrapper">
-    <div id="header-inner" class="inner">
-        <div id="logo-wrap-page">
-            <span class="logo-span"><a href="{{ url_for_lang('') }}" id="logo"></a></span>
+<div class="header">
+    <div class="header-left">
+        <div class="logo-wrap">
+            <span class="logo-span"><a class="logo" href="/"></a></span>
             <span class="logo-span"><a class="logo-text" href="/">nimbus</a></span>
         </div>
         <header class="dropdown">
             <nav>
                 <ul>
-                <li class="has-submenu"><a href="#">Status App</a>
-                    <div class="sub-menu">
-                        <ul>
-                            <li><a href="https://status/im">About</a></li>
-                            <li><a href="https://status.im">Features</a></li>
-                            <li><a href="https://desktop.status.im">Desktop</a></li>
-                            <li><a href="https://docs.status/im">Docs</a></li>
-                            <li><a href="https://our.status/im">Blog</a></li>
-                            <li><a href="https://people-ops.status.im/">Contribute</a></li>
-                        </ul>
-                    </div>
-                </li>
-
-                <li class="has-submenu"><a href="#">Embark</a>
-                    <div class="sub-menu">
-                        <ul>
-                            <li><a href="https://embark.status.im">About</a></li>
-                            <li><a href="https://embark.status.im/docs">Docs</a></li>
-                            <li><a href="https://our.status.im/tag/embark">Blog</a></li>
-                            <li><a href="https://gitter.im/embark-framework/Lobby">Contribute</a></li>
-                        </ul>
-                    </div>
-                </li>
-
-                <li><a href="https://our.status.im/tag/studio">Studio</a></li>
-
-                <li><a href="https://status.im/incubate">Incubate</a></li>
-
-                <li class="current has-submenu"><a href="/">Nimbus</a>
-                    <div class="sub-menu">
-                        <ul>
-                            <li><a href="#">About</a></li>
-                            <li><a href="/docs/">Docs</a></li>
-                            <li><a href="https://our.status.im/tag/research">Blog</a></li>
-                            <li><a href="https://gitter.im/status-im/nimbus">Contribute</a></li>
-                        </ul>
-                    </div>
-                </li>
-
-                <li><a href="https://our.status.im/tag/hardwallet">Hardwallet</a></li>
-
-                <li><a href="https://our.status.im">Community</a></li>
+                    <li class="has-submenu">
+                        <a href="#">Status App</a>
+                        <i class="mobile-submenu-trigger"></i>
+                        <div class="sub-menu">
+                            <ul>
+                                <li><a href="https://status/im">About</a></li>
+                                <li><a href="https://status.im">Features</a></li>
+                                <li><a href="https://desktop.status.im">Desktop</a></li>
+                                <li><a href="https://docs.status/im">Docs</a></li>
+                                <li><a href="https://our.status/im">Blog</a></li>
+                                <li><a href="https://people-ops.status.im/">Contribute</a></li>
+                            </ul>
+                        </div>
+                    </li>
+                    <li class="has-submenu">
+                        <a href="#">Embark</a>
+                        <i class="mobile-submenu-trigger"></i>
+                        <div class="sub-menu">
+                            <ul>
+                                <li><a href="https://embark.status.im">About</a></li>
+                                <li><a href="https://embark.status.im/docs">Docs</a></li>
+                                <li><a href="https://our.status.im/tag/embark">Blog</a></li>
+                                <li><a href="https://gitter.im/embark-framework/Lobby">Contribute</a></li>
+                            </ul>
+                        </div>
+                    </li>
+                    <li><a href="https://our.status.im/tag/studio">Studio</a></li>
+                    <li><a href="https://status.im/incubate">Incubate</a></li>
+                    <li class="current has-submenu">
+                        <a href="/">Nimbus</a>
+                        <i class="mobile-submenu-trigger"></i>
+                        <div class="sub-menu">
+                            <ul>
+                                <li><a href="#">About</a></li>
+                                <li><a href="/docs/">Docs</a></li>
+                                <li><a href="https://our.status.im/tag/research">Blog</a></li>
+                                <li><a href="https://gitter.im/status-im/nimbus">Contribute</a></li>
+                            </ul>
+                        </div>
+                    </li>
+                    <li><a href="https://our.status.im/tag/hardwallet">Hardwallet</a></li>
+                    <li><a href="https://our.status.im">Community</a></li>
                 </ul>
             </nav>
         </header>
-
-        <div class="secondary-nav">
-            <div id="search-input-wrap" class="standalone">
-                <div id="search-input-icon">
-                    <i class="fa fa-search"></i>
-                </div>
-                <input type="search" id="search-input" placeholder="Search...">
-            </div>
-
-            <div class="second-nav-links">
-                <span><a href="http://get.status.im/chat/public/status" class="button button--secondary button--header">Status Public Chat</a></span>
-                <span class="social-link social-link--twitter"><a href="https://twitter.com/ethstatus" target="_blank"></a></span>
-                <span class="social-link social-link--gitter"><a href="https://gitter.im/status-im/nimbus" target="_blank"></a></span>
-                <span class="social-link social-link--github"><a href="https://github.com/status-im" target="_blank"></a></span>
-            </div>
-        </div>
-
-        <a id="mobile-nav-toggle">
-            <span class="mobile-nav-toggle-bar"></span>
-            <span class="mobile-nav-toggle-bar"></span>
-            <span class="mobile-nav-toggle-bar"></span>
-        </a>
     </div>
-</div>
+    <div class="secondary-nav">
+        <div id="search-input-wrap">
+            <div id="search-input-icon">
+                <i class="fa fa-search"></i>
+            </div>
+            <input type="search" id="search-input" placeholder="Search...">
+        </div>
+        <span><a href="http://get.status.im/chat/public/status" class="button button--secondary">Status Public Chat</a></span>
+        <span class="social-link social-link--twitter"><a href="https://twitter.com/ethstatus" target="_blank"></a></span>
+        <span class="social-link social-link--gitter"><a href="https://gitter.im/status-im/nimbus" target="_blank"></a></span>
+        <span class="social-link social-link--github"><a href="https://github.com/status-im" target="_blank"></a></span>
+    </div>
+    <a href="#" class="mobile-menu-trigger">
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M4 7C4 6.44727 4.44775 6 5 6H19C19.5522 6 20 6.44727 20 7C20 7.28516 19.8811 7.54102 19.6903 7.72266C19.5109 7.89453 19.2677 8 19 8H5C4.44775 8 4 7.55273 4 7ZM4 17C4 16.4473 4.44775 16 5 16H19C19.1147 16 19.2251 16.0195 19.3278 16.0547C19.463 16.1016 19.5851 16.1777 19.687 16.2734C19.8798 16.4551 20 16.7129 20 17C20 17.5527 19.5522 18 19 18H5C4.44775 18 4 17.5527 4 17ZM5 11C4.44775 11 4 11.4473 4 12C4 12.5527 4.44775 13 5 13H15C15.3312 13 15.6249 12.8398 15.8068 12.5918C15.9282 12.4258 16 12.2207 16 12C16 11.6387 15.8087 11.3223 15.5221 11.1465C15.3701 11.0527 15.1913 11 15 11H5Z" fill="black"/>
+        </svg>
+    </a>
+</div>
\ No newline at end of file
diff --git a/themes/navy/layout/partial/mobile_nav.swig b/themes/navy/layout/partial/mobile_nav.swig
index 22fac03..1928fc3 100644
--- a/themes/navy/layout/partial/mobile_nav.swig
+++ b/themes/navy/layout/partial/mobile_nav.swig
@@ -1,21 +1,22 @@
-<nav id="mobile-nav">
-  <div id="mobile-nav-inner">
-    <ul id="mobile-nav-list">
-      {{ header_menu('mobile-nav') }}
-      <li class="mobile-nav-item">
-        <a href="https://github.com/{{ config.github }}" class="mobile-nav-link" rel="external" target="_blank">GitHub</a>
-      </li>
-    </ul>
-    {% if page.layout == 'page' %}
-      {{ doc_sidebar('mobile-nav') }}
-    {% endif %}
+<div class="backdrop"></div>
+<div class="mobile-menu-container">
+  <div class="mobile-menu-container-inner">
+    <div class="mobile-menu-header">
+      <div class="logo-wrap">
+          <span class="logo-span"><a class="logo" href="/"></a></span>
+          <span class="logo-span"><a class="logo-text" href="/">nimbus</a></span>
+      </div>
+      <a href="#" class="close">
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M12 10.574L7.72275 6.2968C7.32616 5.90021 6.68994 5.90241 6.29617 6.29617C5.89966 6.69269 5.90269 7.32864 6.2968 7.72275L10.574 12L6.2968 16.2772C5.90021 16.6738 5.90241 17.3101 6.29617 17.7038C6.69269 18.1003 7.32864 18.0973 7.72275 17.7032L12 13.426L16.2772 17.7032C16.6738 18.0998 17.3101 18.0976 17.7038 17.7038C18.1003 17.3073 18.0973 16.6714 17.7032 16.2772L13.426 12L17.7032 7.72275C18.0998 7.32616 18.0976 6.68994 17.7038 6.29617C17.3073 5.89966 16.6714 5.90269 16.2772 6.2968L12 10.574Z" fill="black"/>
+        </svg>
+      </a>
+    </div>
+    <div class="ecosystem">
+      <span class="title">Ecosystem</span>
+    </div>
+    <div class="community">
+      <span class="title">Community</span>
+    </div>
   </div>
-  <div id="mobile-lang-select-wrap">
-    <span id="mobile-lang-select-label"><i class="fa fa-globe"></i><span>{{ lang_name(page.lang) }}</span></span>
-    <select id="mobile-lang-select" data-canonical="{{ canonical_path_for_nav() }}">
-      {% for lang in site.data.languages %}
-        <option value="{{ loop.key }}"{% if page.lang === loop.key %} selected{% endif %}>{{ lang_name(loop.key) }}</option>
-      {% endfor %}
-    </select>
-  </div>
-</nav>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/themes/navy/source/css/_partial/main.styl b/themes/navy/source/css/_partial/main.styl
index 8d941e2..60753db 100644
--- a/themes/navy/source/css/_partial/main.styl
+++ b/themes/navy/source/css/_partial/main.styl
@@ -227,16 +227,161 @@ select[multiple] {
   vertical-align: top;
 }
 
-.header {
+.backdrop
+  z-index: 9998;
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height 100%;
+  background: #000000;
+  opacity: 0.45;
+  visibility: hidden;
+  opacity: 0;
+  pointer-events: none;
+  -webkit-transition: all 0.3s ease-in-out;
+  -moz-transition: all 0.3s ease-in-out;
+  -o-transition: all 0.3s ease-in-out;
+  transition: all 0.3s ease-in-out;
+.mobile-menu-container
+  position: fixed;
+  z-index: 9999;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  padding: 16px;
+  overflow: auto;
+  visibility: hidden;
+  opacity: 0;
+  pointer-events: none;
+  -webkit-transition: all 0.3s ease-in-out;
+  -moz-transition: all 0.3s ease-in-out;
+  -o-transition: all 0.3s ease-in-out;
+  transition: all 0.3s ease-in-out;
+  .mobile-menu-container-inner
+    top: 16px;
+    left: 16px;
+    background: #fff;
+    -webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
+    box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
+    border-radius: 8px;
+    width: calc(100vw - 32px);
+    .title
+      font-size: 14px;
+      text-transform: uppercase;
+      color: #939BA1;
+    .ecosystem
+      padding: 24px 24px 12px 24px
+    .community 
+      padding: 0 24px;
+      border-radius: 0 0 8px 8px;
+      overflow: hidden;
+      .secondary-nav
+        margin: 0;
+        display: flex;
+        flex-wrap: wrap;
+        span
+          order: 1;
+          margin: 15px 24px 0 0;
+          &.social-link--github a
+            background-image: url(../img/icon-github-mobile.svg);
+            width: 32px;
+            height: 32px;
+          &.social-link--gitter a
+            background-image: url(../img/icon-gitter-mobile.svg);
+            width: 32px;
+            height: 32px;
+          &.social-link--twitter a
+            background-image: url(../img/icon-twitter-mobile.svg);
+            width: 32px;
+            height: 32px;
+          &:not(.social-link)
+            order: 2;
+            background: #EEF2F5;
+            padding: 16px 24px;
+            margin-left: -24px;
+            width: calc(100% + 48px);
+            margin-right: -24px;
+            margin-top: 20px;
+            a
+              background: #FFFFFF;
+              box-shadow: 0px 2px 4px rgba(43, 59, 71, 0.124066);
+              border-radius: 20px;
+              text-transform: uppercase;
+              font-size: 14px;
+              letter-spacing: 1px;
+              color: #000000;
+              text-align: center;
+              padding: 10px 23px 7px;
+              font-weight: 500;
+    .mobile-menu-header
+      position: relative
+      .close
+        position: absolute;
+        top: 50%;
+        display: flex;
+        padding: 10px;
+        margin-top: -22px;
+        right: 14px;
+      .logo-wrap
+        padding: 16px 24px;
+        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+        .logo
+          background-image: url(../img/nimbus.svg);
+          background-size: 44px;
+          width: 44px;
+          height: 44px;
+        .logo-text
+            color: #000;
+            font-size: 22px;
+    header
+      margin-left: 0
+      nav 
+        width: 100%;
+        ul 
+          display: flex;
+          flex-direction: column;
+          margin-top: 10px;
+          li 
+            margin: 0;
+            .sub-menu
+              display: none;
+            a
+              padding: 12px 0;
+              color: #000;
+            .mobile-submenu-trigger
+              background-image: url(../img/arrow.svg);
+              width: 24px;
+              top: 0;
+              right: -12px;
+              position: absolute;
+              height: 100%;
+              background-repeat: no-repeat;
+              background-position: center;
+              padding: 0 24px;
+
+
+.header
   position: relative;
   display: flex;
   justify-content: space-between;
   width: 1200px;
   height: 56px;
   top: 0;
-  margin: 24px 0 0 0;
+  margin: 24px auto;
   z-index: 9;
-}
+  .mobile-menu-trigger
+    display: flex;
+    height: auto;
+    align-self: center;
+    margin-right: 6px;
+    padding: 10px;
+    margin-left: auto;
+    display: none;
+    svg
+      path
+        fill: #fff
 
 .header-left {
   display: flex;
@@ -449,7 +594,7 @@ select[multiple] {
   margin-right: 0;
 }
 
-@media (max-width: 1072px) {
+@media (max-width: 1199px) {
   .header {
     width: 100%;
     left: 0;
@@ -459,36 +604,6 @@ select[multiple] {
   }
 }
 
-@media (max-width: 710px) {
-  .header {
-    margin-top: 8px;
-    padding: 0 16px;
-  }
-
-  .logo-wrap {
-    width: 91px;
-    height: 21px;
-  }
-
-  .logo {
-    width: 91px;
-    height: 21px;
-    background-size: 91px;
-  }
-
-  .main-nav {
-    display: none;
-  }
-
-  .secondary-nav li {
-    margin-right: 12px;
-  }
-
-  .secondary-nav li.social-link {
-    margin-left: 2px;
-  }
-}
-
 .home-cover {
   position: fixed;
   left: 0;
@@ -601,7 +716,7 @@ select[multiple] {
   padding: 8px 0 0 0;
 }
 
-@media (max-width: 710px) {
+@media (max-width: 991px) {
   .intro {
     width: 100%;
     margin: 0;
@@ -721,7 +836,7 @@ select[multiple] {
   color: #363763;
 }
 
-@media (max-width: 1072px) {
+@media (max-width: 1199px) {
   .features {
     width: 100%;
     margin: 0 auto;
@@ -764,7 +879,7 @@ select[multiple] {
   padding-top: 32px;
 }
 
-@media (max-width: 1072px) {
+@media (max-width: 1199px) {
   .community {
     width: 100%;
     flex-wrap: wrap;
@@ -838,7 +953,7 @@ body {
   box-shadow: 0 -20px 11px 0 rgba(43, 55, 107, 0.08);
 }
 
-@media (max-width: 710px) {
+@media (max-width: 991px) {
   .home-wrap {
     margin: 400px 0 0 0;
   }
@@ -1078,7 +1193,7 @@ pre {
   } 
 }
 
-@media (max-width: 1072px) {
+@media (max-width: 1199px) {
   .sections {
     margin: 12px 0 0 0;
     padding-bottom: 32px;
@@ -1369,4 +1484,34 @@ footer .share a{
 footer input[type="email"]{
   border: 3px solid #ffffff;
   background: #eff0f1;
-}
\ No newline at end of file
+}
+
+@media (max-width: 1199px)
+  .open
+    .backdrop
+      visibility: visible;
+      opacity: 0.45;
+      pointer-events: all;
+    .mobile-menu-container
+      visibility: visible;
+      opacity: 1;
+      pointer-events: all;
+  .header
+    margin: 10px 0;
+    padding: 0 16px;
+    .mobile-menu-trigger
+      display: flex;
+    .logo-text
+      font-size: 22px
+    .logo
+      width: 44px
+      height: 44px
+    header
+      display: none
+    .secondary-nav
+      display: none
+    .mobile-menu-container
+      header
+        display: flex
+      .secondary-nav
+        display: flex
\ No newline at end of file
diff --git a/themes/navy/source/img/arrow.svg b/themes/navy/source/img/arrow.svg
new file mode 100644
index 0000000..3603cd1
--- /dev/null
+++ b/themes/navy/source/img/arrow.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.6809 12.0013L9.28104 8.62758C8.91136 8.26074 8.90774 7.65332 9.28306 7.28088C9.66099 6.90586 10.266 6.90756 10.6402 7.27888L14.7216 11.329C14.9061 11.5121 14.9994 11.7551 15 11.9989C15.0023 12.246 14.9084 12.4883 14.7216 12.6737L10.6402 16.7238C10.2705 17.0906 9.65837 17.0942 9.28306 16.7218C8.90513 16.3467 8.90684 15.7464 9.28104 15.3751L12.6809 12.0013Z" fill="#939BA1"/>
+</svg>
diff --git a/themes/navy/source/img/arrow_orange.svg b/themes/navy/source/img/arrow_orange.svg
new file mode 100644
index 0000000..acf0489
--- /dev/null
+++ b/themes/navy/source/img/arrow_orange.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle opacity="0.12" cx="12" cy="12" r="12" fill="#FF9C00"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.0548 13.0807L11.4957 16.6398C11.1531 16.9824 10.6008 16.9854 10.2567 16.6413C9.91502 16.2996 9.92 15.7406 10.2583 15.4024L13.2129 12.4478L10.2583 9.4932C9.91571 9.15064 9.91264 8.59832 10.2567 8.25423C10.5984 7.91252 11.1574 7.9175 11.4957 8.25576L15.0548 11.8149C15.2529 12.013 15.3375 12.2813 15.307 12.5389C15.2892 12.7374 15.2048 12.9307 15.0548 13.0807Z" fill="#FF9C00"/>
+</svg>
diff --git a/themes/navy/source/img/close.svg b/themes/navy/source/img/close.svg
new file mode 100644
index 0000000..26cae72
--- /dev/null
+++ b/themes/navy/source/img/close.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12 10.574L7.72275 6.2968C7.32616 5.90021 6.68994 5.90241 6.29617 6.29617C5.89966 6.69269 5.90269 7.32864 6.2968 7.72275L10.574 12L6.2968 16.2772C5.90021 16.6738 5.90241 17.3101 6.29617 17.7038C6.69269 18.1003 7.32864 18.0973 7.72275 17.7032L12 13.426L16.2772 17.7032C16.6738 18.0998 17.3101 18.0976 17.7038 17.7038C18.1003 17.3073 18.0973 16.6714 17.7032 16.2772L13.426 12L17.7032 7.72275C18.0998 7.32616 18.0976 6.68994 17.7038 6.29617C17.3073 5.89966 16.6714 5.90269 16.2772 6.2968L12 10.574Z" fill="black"/>
+</svg>
diff --git a/themes/navy/source/img/graphic-friendly-beginnings.svg b/themes/navy/source/img/graphic-friendly-beginnings.svg
new file mode 100644
index 0000000..222814b
--- /dev/null
+++ b/themes/navy/source/img/graphic-friendly-beginnings.svg
@@ -0,0 +1,14 @@
+<svg width="215" height="192" viewBox="0 0 215 192" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle opacity="0.1" cx="100" cy="84" r="66" fill="#FD9A00"/>
+<circle opacity="0.1" cx="100" cy="84" r="82" fill="#FD9A00"/>
+<circle cx="39" cy="112" r="28" fill="#FF9C00"/>
+<circle cx="84" cy="157" r="17" fill="#FFE6BF"/>
+<circle opacity="0.8" cx="88" cy="119" r="9" fill="#FF9C00"/>
+<circle opacity="0.8" cx="133" cy="183" r="9" fill="#FF9C00"/>
+<circle opacity="0.8" cx="197" cy="60" r="9" fill="#FF9C00"/>
+<circle opacity="0.8" cx="209" cy="154" r="6" fill="#FFE5BB"/>
+<circle opacity="0.8" cx="199" cy="138" r="9" fill="#FF9C00"/>
+<circle opacity="0.8" cx="9" cy="9" r="9" fill="#FFE5BB"/>
+<circle opacity="0.8" cx="97" cy="23" r="15" fill="#FF9C00"/>
+<circle cx="181.5" cy="98.5" r="12.5" fill="#FFE5BB"/>
+</svg>
diff --git a/themes/navy/source/img/graphic-licensing.svg b/themes/navy/source/img/graphic-licensing.svg
new file mode 100644
index 0000000..39c21dc
--- /dev/null
+++ b/themes/navy/source/img/graphic-licensing.svg
@@ -0,0 +1,12 @@
+<svg width="196" height="196" viewBox="0 0 196 196" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="98" cy="98" r="98" fill="#FFF5E5"/>
+<circle opacity="0.1" cx="98" cy="98" r="63" fill="#FF9C00"/>
+<circle opacity="0.1" cx="98" cy="98" r="32" fill="#FF9C00"/>
+<circle cx="179" cy="151" r="17" fill="#FF9C00"/>
+<circle cx="27" cy="32" r="14" fill="#FFE5BB"/>
+<circle cx="70" cy="82" r="6" fill="#FF9C00"/>
+<circle cx="124" cy="116" r="9" fill="#FF9C00"/>
+<circle cx="165" cy="25" r="7" fill="#FF9C00"/>
+<circle cx="89" cy="159" r="9" fill="#FFE5BB"/>
+<circle cx="24" cy="161" r="7" fill="#FF9C00"/>
+</svg>
diff --git a/themes/navy/source/img/graphic-network.svg b/themes/navy/source/img/graphic-network.svg
new file mode 100644
index 0000000..2d6462d
--- /dev/null
+++ b/themes/navy/source/img/graphic-network.svg
@@ -0,0 +1,12 @@
+<svg width="226" height="229" viewBox="0 0 226 229" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="61" cy="197" r="32" fill="#FFF5E5"/>
+<circle cx="21" cy="194" r="21" fill="#FF9C00"/>
+<circle cx="211.5" cy="202.5" r="13.5" fill="#FF9C00"/>
+<circle cx="180" cy="147" r="9" fill="#FF9C00"/>
+<circle cx="133" cy="23" r="10" fill="#FF9C00"/>
+<circle cx="157" cy="6" r="6" fill="#FF9C00"/>
+<circle cx="37" cy="162" r="6" fill="#FF9C00"/>
+<circle cx="15" cy="144" r="6" fill="#FF9C00"/>
+<circle opacity="0.1" cx="75" cy="71" r="54" fill="#FF9C00"/>
+<circle opacity="0.1" cx="147" cy="129" r="79" fill="#FF9C00"/>
+</svg>
diff --git a/themes/navy/source/img/graphic-platform-support.svg b/themes/navy/source/img/graphic-platform-support.svg
new file mode 100644
index 0000000..aae4cd3
--- /dev/null
+++ b/themes/navy/source/img/graphic-platform-support.svg
@@ -0,0 +1,25 @@
+<svg width="244" height="238" viewBox="0 0 244 238" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle opacity="0.2" cx="159.5" cy="78.5" r="65.5" fill="#FF9C00"/>
+<circle cx="196" cy="181" r="16" fill="#FF9C00"/>
+<circle cx="77" cy="16" r="16" fill="#FF9C00"/>
+<circle cx="199.5" cy="46.5" r="24.5" fill="#FF9C00"/>
+<circle opacity="0.5" cx="51" cy="111" r="14" fill="#FF9C00"/>
+<circle cx="41" cy="79" r="8" fill="#FF9C00"/>
+<circle cx="22" cy="97" r="6" fill="#FF9C00"/>
+<circle cx="121" cy="180" r="6" fill="#FF9C00"/>
+<circle opacity="0.2" cx="49" cy="189" r="49" fill="#FF9C00"/>
+<circle cx="169" cy="217" r="6" fill="#FF9C00"/>
+<circle opacity="0.5" cx="226" cy="77" r="6" fill="#FF9C00"/>
+<circle opacity="0.5" cx="71" cy="211" r="6" fill="#FF9C00"/>
+<circle cx="156" cy="182" r="4" fill="#FF9C00"/>
+<circle cx="216" cy="91" r="4" fill="#FF9C00"/>
+<circle cx="61" cy="194" r="4" fill="#FF9C00"/>
+<circle opacity="0.5" cx="65" cy="223" r="4" fill="#FF9C00"/>
+<circle cx="148" cy="210" r="4" fill="#FF9C00"/>
+<circle cx="81" cy="202" r="4" fill="#FF9C00"/>
+<circle opacity="0.5" cx="37" cy="169" r="4" fill="#FF9C00"/>
+<circle cx="98" cy="140" r="9" fill="#FF9C00"/>
+<circle opacity="0.5" cx="203" cy="106" r="9" fill="#FF9C00"/>
+<circle cx="235" cy="96" r="9" fill="#FF9C00"/>
+<circle opacity="0.5" cx="140" cy="194" r="8" fill="#FF9C00"/>
+</svg>
diff --git a/themes/navy/source/img/graphic-research.svg b/themes/navy/source/img/graphic-research.svg
new file mode 100644
index 0000000..bfd7b13
--- /dev/null
+++ b/themes/navy/source/img/graphic-research.svg
@@ -0,0 +1,14 @@
+<svg width="250" height="249" viewBox="0 0 250 249" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle opacity="0.1" cx="86" cy="163" r="86" fill="#FF9C00"/>
+<circle opacity="0.1" cx="148.5" cy="101.5" r="101.5" fill="#FF9C00"/>
+<circle cx="197" cy="218" r="15" fill="#FF9C00"/>
+<circle cx="107" cy="147" r="15" fill="#FF9C00"/>
+<circle cx="137" cy="113" r="11" fill="#FF9C00"/>
+<circle cx="164" cy="124" r="8" fill="#FF9C00"/>
+<circle cx="182" cy="25" r="8" fill="#FF9C00"/>
+<circle opacity="0.5" cx="154" cy="142" r="6" fill="#FF9C00"/>
+<circle opacity="0.5" cx="197" cy="41" r="6" fill="#FF9C00"/>
+<circle opacity="0.5" cx="36" cy="71" r="6" fill="#FF9C00"/>
+<circle opacity="0.8" cx="44" cy="53" r="6" fill="#FF9C00"/>
+<circle opacity="0.3" cx="13" cy="33" r="6" fill="#FF9C00"/>
+</svg>
diff --git a/themes/navy/source/img/icon-github-mobile.svg b/themes/navy/source/img/icon-github-mobile.svg
new file mode 100644
index 0000000..305d164
--- /dev/null
+++ b/themes/navy/source/img/icon-github-mobile.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M2.5 12.228c0 4.077 2.722 7.535 6.497 8.756.475.085.648-.2.648-.445 0-.219-.008-.8-.012-1.57-2.643.558-3.2-1.236-3.2-1.236-.433-1.067-1.056-1.35-1.056-1.35-.862-.572.066-.561.066-.561.953.065 1.455.951 1.455.951.847 1.41 2.224 1.003 2.765.766.086-.596.332-1.002.603-1.233-2.11-.233-4.327-1.025-4.327-4.56 0-1.008.37-1.832.978-2.477-.098-.233-.424-1.172.093-2.442 0 0 .797-.248 2.612.946A9.351 9.351 0 0 1 12 7.463c.807.003 1.62.105 2.379.31 1.813-1.194 2.61-.946 2.61-.946.518 1.27.192 2.209.094 2.442.61.645.977 1.47.977 2.476 0 3.545-2.222 4.326-4.338 4.554.341.285.645.848.645 1.709 0 1.233-.012 2.228-.012 2.531 0 .247.172.534.653.444 3.773-1.223 6.492-4.68 6.492-8.755C21.5 7.131 17.246 3 12 3s-9.5 4.131-9.5 9.228z" fill="#939BA1" fill-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/themes/navy/source/img/icon-gitter-mobile.svg b/themes/navy/source/img/icon-gitter-mobile.svg
new file mode 100644
index 0000000..06c3fd8
--- /dev/null
+++ b/themes/navy/source/img/icon-gitter-mobile.svg
@@ -0,0 +1,3 @@
+<svg width="14" height="22" viewBox="0 0 14 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2 0H0V14H2V0ZM14 3H12V14H14V3ZM4 3H6V22H4V3ZM10 3H8V22H10V3Z" fill="#939BA1"/>
+</svg>
diff --git a/themes/navy/source/img/icon-menu.svg b/themes/navy/source/img/icon-menu.svg
new file mode 100644
index 0000000..04ac67f
--- /dev/null
+++ b/themes/navy/source/img/icon-menu.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4 7C4 6.44727 4.44775 6 5 6H19C19.5522 6 20 6.44727 20 7C20 7.28516 19.8811 7.54102 19.6903 7.72266C19.5109 7.89453 19.2677 8 19 8H5C4.44775 8 4 7.55273 4 7ZM4 17C4 16.4473 4.44775 16 5 16H19C19.1147 16 19.2251 16.0195 19.3278 16.0547C19.463 16.1016 19.5851 16.1777 19.687 16.2734C19.8798 16.4551 20 16.7129 20 17C20 17.5527 19.5522 18 19 18H5C4.44775 18 4 17.5527 4 17ZM5 11C4.44775 11 4 11.4473 4 12C4 12.5527 4.44775 13 5 13H15C15.3312 13 15.6249 12.8398 15.8068 12.5918C15.9282 12.4258 16 12.2207 16 12C16 11.6387 15.8087 11.3223 15.5221 11.1465C15.3701 11.0527 15.1913 11 15 11H5Z" fill="black"/>
+</svg>
diff --git a/themes/navy/source/img/icon-twitter-mobile.svg b/themes/navy/source/img/icon-twitter-mobile.svg
new file mode 100644
index 0000000..abcdc98
--- /dev/null
+++ b/themes/navy/source/img/icon-twitter-mobile.svg
@@ -0,0 +1 @@
+<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M19.27 8.877c0-.15-.003-.3-.01-.449A7.08 7.08 0 0 0 21 6.629a6.983 6.983 0 0 1-2.003.547 3.488 3.488 0 0 0 1.534-1.922 7.006 7.006 0 0 1-2.215.844A3.49 3.49 0 0 0 15.77 5a3.482 3.482 0 0 0-3.398 4.266 9.915 9.915 0 0 1-7.189-3.63 3.468 3.468 0 0 0 1.08 4.638 3.472 3.472 0 0 1-1.58-.434v.044A3.48 3.48 0 0 0 7.48 13.29a3.51 3.51 0 0 1-1.575.06 3.49 3.49 0 0 0 3.258 2.412 7.016 7.016 0 0 1-4.332 1.487c-.281 0-.559-.015-.832-.048a9.903 9.903 0 0 0 5.346 1.56c6.416 0 9.924-5.293 9.924-9.884z" fill="#939BA1" fill-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/themes/navy/source/img/nimbus.svg b/themes/navy/source/img/nimbus.svg
new file mode 100644
index 0000000..57ce6a0
--- /dev/null
+++ b/themes/navy/source/img/nimbus.svg
@@ -0,0 +1,4 @@
+<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M28 0C12.536 0 0 12.5362 0 28C0 43.464 12.536 56 28 56C43.464 56 56 43.464 56 28C56 12.5362 43.464 0 28 0Z" fill="#FF9C00"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M28.1021 26.7727C29.5115 26.9191 30.9209 27.0654 32.6536 26.9691C37.3482 26.708 40.1917 24.3042 39.99 20.7111C39.7842 17.0553 36.0013 14.803 32.2159 15.0136C26.0472 15.3565 21.5108 20.7597 21 26.9353C21.8377 26.7395 22.7195 26.6226 23.5511 26.5764C25.2837 26.4801 26.6929 26.6264 28.1021 26.7727ZM16.0096 34.7648C16.2044 38.116 19.7884 40.1805 23.3746 39.9876C29.2185 39.6731 33.5162 34.7202 34 29.0592C33.2063 29.2387 32.3711 29.346 31.5833 29.3883C29.9419 29.4766 28.6067 29.3424 27.2715 29.2083C25.9363 29.0742 24.6011 28.9401 22.9595 29.0284C18.5125 29.2677 15.8182 31.4711 16.0096 34.7648Z" fill="white"/>
+</svg>
diff --git a/themes/navy/source/js/mobile_nav.js b/themes/navy/source/js/mobile_nav.js
index de54fd6..a80e407 100644
--- a/themes/navy/source/js/mobile_nav.js
+++ b/themes/navy/source/js/mobile_nav.js
@@ -1,22 +1,26 @@
-(function() {
-  'use strict';
+$(document).ready(function () {
 
-  var body = document.getElementsByTagName('body')[0];
-  var navToggle = document.getElementById('mobile-nav-toggle');
-  var dimmer = document.getElementById('mobile-nav-dimmer');
-  var CLASS_NAME = 'mobile-nav-on';
-  if (!navToggle) return;
+  var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
 
-  navToggle.addEventListener('click', function(e) {
-    e.preventDefault();
-    e.stopPropagation();
-    body.classList.toggle(CLASS_NAME);
+  $(window).on('resize', function(event) {
+    w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
+    setMenu(w);
   });
 
-  dimmer.addEventListener('click', function(e) {
-    if (!body.classList.contains(CLASS_NAME)) return;
+  function setMenu(w){
+    if (w < 1199) {
+      $('.header header').appendTo('.mobile-menu-container .ecosystem');
+      $('.header .secondary-nav').appendTo('.mobile-menu-container .community');
+    }else{
+      $('.mobile-menu-container header').appendTo('.header .header-left');
+      $('.mobile-menu-container .secondary-nav').insertAfter('.header .header-left');
+    };
+  }
 
-    e.preventDefault();
-    body.classList.remove(CLASS_NAME);
+  setMenu(w);
+
+  $('.mobile-menu-trigger, .backdrop, .mobile-menu-container .close').on('click', function () {
+    $('body').toggleClass('open');
   });
-}());
+  
+});