segmentio · jedrzejchalubek · Oct 9, 2019 · Oct 9, 2019
diff --git a/js/index.js b/js/index.js
@@ -3,11 +3,13 @@
 import feedback from './feedback'
 import accordion from './accordion'
 import searchNavbar from './search-navbar'
+import menuMobile from './menu-mobile'
 import headingsAnchors from './headings-anchors'
 import dropdownMenu from './dropdown-menu'
 
 feedback()
 accordion()
 searchNavbar()
+menuMobile()
 headingsAnchors()
 dropdownMenu()
diff --git a/js/menu-mobile/index.js b/js/menu-mobile/index.js
@@ -0,0 +1,24 @@
+const COMPONENT_NAME = 'data-menu-mobile'
+const COMPONENT_SELECTOR = `[${COMPONENT_NAME}]`
+const TRIGGER_SELECTOR = '[data-ref*="menu-mobile[trigger]"]'
+
+const DEFAULTS = {
+  classActive: 'active'
+}
+
+export default function () {
+  const component = document.querySelector(COMPONENT_SELECTOR)
+
+  if (component) {
+    const settings = Object.assign({}, DEFAULTS, JSON.parse(component.getAttribute(COMPONENT_NAME) || '{}'))
+    const triggers = document.querySelectorAll(TRIGGER_SELECTOR)
+
+    for (let i = 0; i < triggers.length; i++) {
+      triggers[i].addEventListener('click', (event) => {
+        event.preventDefault()
+
+        component.classList.toggle(settings.classActive)
+      })
+    }
+  }
+}
diff --git a/js/search-navbar/index.js b/js/search-navbar/index.js
@@ -1,18 +1,24 @@
-const COMPONENT_SELECTOR = '[data-search-navbar]'
+const COMPONENT_NAME = 'data-search-navbar'
+const COMPONENT_SELECTOR = `[${COMPONENT_NAME}]`
 const TRIGGER_SELECTOR = '[data-ref*="search-navbar[trigger]"]'
 
+const DEFAULTS = {
+  classActive: 'active'
+}
+
 export default function () {
   const component = document.querySelector(COMPONENT_SELECTOR)
 
   if (component) {
-    const triggers = document.querySelectorAll(TRIGGER_SELECTOR);
+    const settings = Object.assign({}, DEFAULTS, JSON.parse(component.getAttribute(COMPONENT_NAME) || '{}'))
+    const triggers = document.querySelectorAll(TRIGGER_SELECTOR)
 
     for (let i = 0; i < triggers.length; i++) {
-      triggers[i].addEventListener('click', e => {
-        e.preventDefault()
+      triggers[i].addEventListener('click', (event) => {
+        event.preventDefault()
 
-        component.classList.toggle(component.dataset.activeClass)
+        component.classList.toggle(settings.classActive)
       })
     }
-  }  
+  }
 }
diff --git a/src/_includes/menu/menu-mobile.html b/src/_includes/menu/menu-mobile.html
@@ -0,0 +1,21 @@
+<div class="sidebar">
+  {% include menu/menu-primary.html %}
+
+  <nav class="menu">
+    <ul class="menu__list list list--unstyle">
+      {% for root_section in site.data.sidenav.api.sections %}
+        {% include menu/menu-item.html root_section=root_section %}
+      {% endfor %}
+
+      <li class="menu-item">
+        <a class="menu-item__link menu-item__link--highlight menu-item__link--icon flex flex--middle" href="{{ site.baseurl }}/help/">
+          <div class="menu-item__icon flex__column">
+            {% include icons/menu/icon-help.svg %}
+          </div>
+
+          <div class="flex__column">Help</div>
+        </a>
+      </li>
+    </ul>
+  </nav>
+</div>
diff --git a/src/_includes/navbar/navbar-mobile.html b/src/_includes/navbar/navbar-mobile.html
@@ -0,0 +1,35 @@
+<nav
+  class="navbar-mobile"
+  data-search-navbar='{ "classActive": "navbar-mobile--searching" }'
+  data-menu-mobile='{ "classActive": "navbar-mobile--active" }'
+>
+  <div class="navbar-mobile__wrapper flex flex--middle">
+    <div class="flex__column">
+      {% include navbar/logo.html %}
+    </div>
+
+    <div class="flex__column flex__column--shrink">
+      <div class="flex flex--medium gutter gutter--large">
+        <div class="flex__column">
+          <button class="navbar-mobile__search-button search-button" data-ref="search-navbar[trigger]">
+            {% include icons/symbols/search.svg %}
+          </button>
+        </div>
+
+        <div class="flex__column">
+          <button class="navbar-mobile__menu-button menu-button" data-ref="menu-mobile[trigger]">
+            <span class="menu-button__line"></span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="navbar-mobile__search">
+    {% include navbar/search.html %}
+  </div>
+
+  <div class="navbar-mobile__panel">
+    {% include menu/menu-mobile.html %}
+  </div>
+</nav>
diff --git a/src/_layouts/main.html b/src/_layouts/main.html
@@ -16,33 +16,7 @@
           {% include navbar/search.html %}
         </div>
 
-        <nav class="navbar-mobile" data-search-navbar data-active-class="navbar-mobile--active">
-          <div class="flex flex--middle">
-            <div class="flex__column">
-              {% include navbar/logo.html %}
-            </div>
-
-            <div class="flex__column flex__column--shrink">
-              <div class="flex flex--medium gutter gutter--large">
-                <div class="flex__column">
-                  <button class="search-button" data-ref="search-navbar[trigger]">
-                    {% include icons/symbols/search.svg %}
-                  </button>
-                </div>
-
-                <div class="flex__column">
-                  <button class="menu-button">
-                    <span class="menu-button__line"></span>
-                  </button>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <div class="navbar-mobile__search">
-            {% include navbar/search.html %}
-          </div>
-        </nav>
+        {% include navbar/navbar-mobile.html %}
       </div>
 
       <div class="stage__content">
@@ -70,4 +44,4 @@
   <footer>
     {% include components/footer.html %}
   </footer>
-</div>
+</div>
diff --git a/src/_sass/components/_navbar-mobile.scss b/src/_sass/components/_navbar-mobile.scss
@@ -1,7 +1,8 @@
 .navbar-mobile {
   $this: &;
 
-  padding: 17px 20px;
+  position: relative;
+  z-index: 10;
   background-color: color(white);
   box-shadow: 0 1px 2px 0 rgba(67, 90, 111, 0.08);
   color: color(gray);
@@ -10,6 +11,12 @@
     display: none;
   }
 
+  &__wrapper {
+    padding: 17px 20px;
+    background-color: color(white);
+    transition: background-color 0.2s ease;
+  }
+
   &__search {
     position: absolute;
     top: 0;
@@ -18,13 +25,50 @@
     width: calc(100% - 40px);
     transform: translate(20px, 12px);
     opacity: 0;
-    transition: 100ms ease opacity;
+    transition: opacity 0.2s ease, z-index 0s linear 0.2s;
   }
 
-  &--active {
+  &__search-button {
+    transition: opacity 0.2s ease;
+  }
+
+  &__panel {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: -1;
+    width: 100%;
+    height: 100vh;
+    max-height: 100vh;
+    background-color: color(gray-light);
+    transform: translateY(-100%);
+    overflow-y: scroll;
+    padding: 76px 24px 24px 24px;
+    transition: transform 0.3s ease;
+  }
+
+  &--searching {
     #{$this}__search {
       z-index: 1;
       opacity: 1;
+      transition: opacity 0.2s ease, z-index 0s linear;
+    }
+  }
+
+  &--active {
+    z-index: 10;
+
+    #{$this}__wrapper {
+      background-color: color(gray-light);
+    }
+
+    #{$this}__search-button {
+      opacity: 0;
+      pointer-events: none;
+    }
+
+    #{$this}__panel {
+      transform: translateY(0);
     }
   }
 }