segmentio · jedrzejchalubek · Oct 4, 2019 · Oct 3, 2019 · Oct 4, 2019 · Oct 4, 2019
@@ -1,7 +1,9 @@
 import feedback from './feedback'
 import accordion from './accordion'
+import searchNavbar from './search-navbar'
 import headingsAnchors from './headings-anchors'
 
 feedback()
 accordion()
+searchNavbar()
 headingsAnchors()
@@ -0,0 +1,18 @@
+const COMPONENT_SELECTOR = '[data-search-navbar]'
+const TRIGGER_SELECTOR = '[data-ref*="search-navbar[trigger]"]'
+
+export default function () {
+  const component = document.querySelector(COMPONENT_SELECTOR)
+
+  if (component) {
+    const triggers = document.querySelectorAll(TRIGGER_SELECTOR);
+
+    for (let i = 0; i < triggers.length; i++) {
+      triggers[i].addEventListener('click', e => {
+        e.preventDefault()
+
+        component.classList.toggle(component.dataset.activeClass)
+      })
+    }
+  }  
+}
@@ -1,6 +1,6 @@
 <a class="logo flex gutter gutter--xsmall" href="{{ site.baseurl }}">
   <span class="flex__column flex__column--shrink">
-    <svg class="logo__shape image" width="140" height="28" xmlns="http://www.w3.org/2000/svg">
+    <svg class="logo__shape image" width="140" height="28" viewBox="0 0 140 28" xmlns="http://www.w3.org/2000/svg">
       <g fill="#1F477D" fill-rule="evenodd">
         <path d="M42.47 12.77l-2.34-.43c-.94-.17-1.42-.6-1.42-1.24 0-.69.79-1.4 2.11-1.4 1.92 0 2.5 1.06 2.68 1.68.03.11.11.2.23.26.12.06.26.06.39.02l2.11-.67c.23-.07.36-.28.3-.48A4.4 4.4 0 0 0 45 8.39a6.72 6.72 0 0 0-4.19-1.2c-2.92 0-5.4 1.88-5.4 4.11 0 1.84 1.46 3.25 3.81 3.68l2.46.46c1.03.2 1.63.69 1.63 1.35 0 .69-.67 1.39-2.17 1.39-1.64 0-2.78-.72-3.04-1.92a.41.41 0 0 0-.23-.27.54.54 0 0 0-.39-.03l-2.18.65c-.21.07-.35.27-.3.46.3 1.35 1.94 3.63 6.1 3.63 3.61 0 5.56-2.08 5.56-4.04 0-1.97-1.53-3.39-4.2-3.89M58.16 12.44h-6.39a3.1 3.1 0 0 1 3.17-2.66c1.83 0 3.06 1.02 3.22 2.66m-3.24-5.26c-3.1 0-6.3 2.52-6.3 6.72 0 2.03.68 3.77 1.98 5.01a6.64 6.64 0 0 0 4.63 1.79c2.76 0 5.01-1.5 5.88-3.89.03-.1.02-.2-.02-.3a.4.4 0 0 0-.24-.2l-1.82-.62a.42.42 0 0 0-.53.24c-.54 1.44-1.64 2.17-3.27 2.17a3.44 3.44 0 0 1-3.55-3.24h9.12c.21 0 .4-.16.41-.36.03-.2.04-.43.04-.65 0-4.11-2.43-6.67-6.33-6.67M73.95 13.77c0 2.34-1.35 3.9-3.35 3.9-2.1 0-3.4-1.5-3.4-3.9 0-2.38 1.33-3.91 3.4-3.91 2 0 3.35 1.57 3.35 3.9m2.44-6.33h-2.11c-.23 0-.41.19-.41.42v.8c-.79-.96-2.04-1.47-3.64-1.47-1.72 0-3.28.69-4.39 1.93a6.96 6.96 0 0 0-1.66 4.66c0 3.8 2.54 6.55 6.05 6.55 1.48 0 2.78-.56 3.61-1.56v1.04c0 2.7-1.15 3.96-3.61 3.96a3.14 3.14 0 0 1-3.18-2.79.42.42 0 0 0-.17-.29.4.4 0 0 0-.33-.06l-2.06.5a.43.43 0 0 0-.32.47c.41 2.88 2.9 4.9 6.06 4.9 2.27 0 4-.7 5.14-2.11a7.3 7.3 0 0 0 1.44-4.66V7.85a.42.42 0 0 0-.42-.42M94.47 7.18c-1.87 0-3.35.74-4.3 2.12a4.34 4.34 0 0 0-3.87-2.12 4.9 4.9 0 0 0-3.66 1.53v-.75a.42.42 0 0 0-.42-.41h-2.08a.42.42 0 0 0-.42.41v12.32c0 .23.2.42.42.42h2.16c.23 0 .42-.19.42-.42v-7.46c0-1.77 1.1-2.96 2.75-2.96 2.15 0 2.48 1.66 2.48 2.65v7.77c0 .23.18.42.42.42h2.18c.23 0 .42-.19.42-.42V12.8c0-1.73 1.12-2.94 2.72-2.94 2.16 0 2.48 1.66 2.48 2.65v7.77c0 .23.19.42.42.42h2.15c.24 0 .43-.19.43-.42v-8.04c0-3.5-2.36-5.06-4.7-5.06M105.24 12.44a3.1 3.1 0 0 1 3.18-2.66c1.83 0 3.05 1.02 3.2 2.66h-6.38zm3.15-5.26c-3.1 0-6.3 2.52-6.3 6.72 0 2.03.68 3.77 1.98 5.01a6.65 6.65 0 0 0 4.64 1.79c2.75 0 5-1.5 5.87-3.89.03-.1.03-.2-.02-.3a.41.41 0 0 0-.24-.2l-1.82-.62a.42.42 0 0 0-.52.24c-.55 1.44-1.65 2.17-3.27 2.17a3.44 3.44 0 0 1-3.56-3.24h9.13c.2 0 .39-.16.4-.36.03-.2.04-.43.04-.65 0-4.11-2.42-6.67-6.33-6.67zM124.4 7.18c-1.53 0-2.85.58-3.76 1.64v-.86c0-.22-.19-.41-.42-.41h-2.15a.42.42 0 0 0-.43.41v12.32c0 .23.19.42.43.42h2.2c.23 0 .43-.19.43-.42v-7.14c0-.92.25-1.74.7-2.3.5-.6 1.2-.92 2.07-.92 1.84 0 2.78.98 2.78 2.93v7.43c0 .23.19.42.43.42h2.2c.23 0 .43-.19.43-.42v-7.85c0-1.5-.43-2.8-1.22-3.72a4.7 4.7 0 0 0-3.7-1.53M139.55 11.06c.25 0 .45-.2.45-.42V8.72c0-.23-.2-.41-.45-.41h-2.5V4.7c0-.24-.2-.42-.44-.42h-2.08c-.25 0-.45.18-.45.41v1.9c0 1.49-1.14 1.7-1.83 1.7h-.55c-.25 0-.45.2-.45.42v1.92c0 .23.2.42.45.42h2.16v6.73c0 2.39 1.55 3.87 4.06 3.87.93 0 1.58-.16 1.76-.2a.42.42 0 0 0 .32-.4v-1.8a.4.4 0 0 0-.16-.31.47.47 0 0 0-.36-.1c-.25.04-.57.07-.8.07-1.17 0-1.63-.42-1.63-1.5v-6.36h2.5zM4.63 21.54a1.56 1.56 0 1 0 0 3.13c.86 0 1.55-.7 1.55-1.57 0-.86-.7-1.56-1.55-1.56M21.78 2.59c-.86 0-1.56.7-1.56 1.57a1.56 1.56 0 0 0 3.1 0c.01-.86-.68-1.57-1.54-1.57M10.5 8.94v1.91c0 .29.24.52.52.52h15.41c.29 0 .52-.23.52-.52V8.94a.52.52 0 0 0-.52-.53h-15.4a.52.52 0 0 0-.53.53m5.93 8.86v-1.92a.52.52 0 0 0-.52-.52H.53a.52.52 0 0 0-.52.52v1.92c0 .28.23.52.52.52h15.4c.29 0 .52-.24.52-.52m10.4-2.59a.51.51 0 0 0-.35-.2l-1.89-.19a.52.52 0 0 0-.57.45 10.9 10.9 0 0 1-3.43 6.6A10.71 10.71 0 0 1 9.5 24a.51.51 0 0 0-.66.29l-.73 1.76a.51.51 0 0 0 0 .41c.05.13.16.23.29.28a13.63 13.63 0 0 0 14.17-2.67 13.86 13.86 0 0 0 4.38-8.46.52.52 0 0 0-.1-.39M.1 10.81a.52.52 0 0 1-.06-.41 13.94 13.94 0 0 1 4.68-7.33A13.69 13.69 0 0 1 17.85.77c.14.04.24.14.3.27s.07.27.02.4l-.67 1.8c-.1.26-.39.4-.65.3A10.7 10.7 0 0 0 6.57 5.38a10.96 10.96 0 0 0-3.66 5.72.51.51 0 0 1-.62.37l-1.85-.42a.52.52 0 0 1-.33-.24"/>
       </g>

@@ -54,7 +54,39 @@
         </div>
 
         <main class="docs__body stage__body">
-          {% include navbar/search.html %}
+          <div>
+            <div class="search">
+              {% 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>
+          </div>
 
           <div class="stage__content">
             {{ content }}

@@ -6,10 +6,11 @@
   &__input {
     display: block;
     vertical-align: middle;
-  }
+    padding: 6px;
 
-  &__input {
-    padding: 12px 20px;
+    @include breakpoint(medium up)  {
+      padding: 12px 20px;
+    }
   }
 
   &--expand {
@@ -23,17 +24,25 @@
     z-index: 0;
 
     #{$this}__input {
-      padding-left: 60px;
+      padding-left: 40px;
+
+      @include breakpoint(medium up)  {
+        padding-left: 60px;
+      }
     }
 
     #{$this}__icon {
       position: absolute;
       top: 0;
       left: 0;
       z-index: 1;
-      width: 60px;
+      width: 40px;
       height: 100%;
       color: color(gray);
+
+      @include breakpoint(medium up)  {
+        width: 60px;
+      }
     }
   }
 }
@@ -0,0 +1,33 @@
+.menu-button {
+  position: relative;
+  width: 22px;
+  height: 16px;
+  cursor: pointer;
+
+  &::before,
+  &::after {
+    content: "";
+    position: absolute;
+    left: 0;
+    width: 100%;
+    height: 2px;
+    background: color(gray);
+    border-radius: 1px;
+  }
+
+  &::before {
+    top: 0;
+  }
+
+  &::after {
+    bottom: 0;
+  }
+
+  &__line {
+    display: inline-block;
+    width: 100%;
+    height: 2px;
+    background: color(gray);
+    border-radius: 1px;
+  }
+}
@@ -0,0 +1,30 @@
+.navbar-mobile {
+  $this: &;
+
+  padding: 17px 20px;
+  background-color: color(white);
+  box-shadow: 0 1px 2px 0 rgba(67, 90, 111, 0.08);
+  color: color(gray);
+
+  @include breakpoint(large up)  {
+    display: none;
+  }
+
+  &__search {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: -1;
+    width: calc(100% - 40px);
+    transform: translate(20px, 12px);
+    opacity: 0;
+    transition: 100ms ease opacity;
+  }
+
+  &--active {
+    #{$this}__search {
+      z-index: 1;
+      opacity: 1;
+    }
+  }
+}
@@ -0,0 +1,4 @@
+.search-button {
+  color: color(gray);
+  cursor: pointer;
+}
@@ -0,0 +1,7 @@
+.search {
+  display: none;
+
+  @include breakpoint(large up)  {
+    display: block;
+  }
+}
@@ -3,24 +3,50 @@
   width: 100%;
   max-width: 1230px;
   margin: 0 auto;
-  padding-left: 20px;
-  padding-right: 20px;
+
+  @include breakpoint(large up)  {
+    padding-left: 20px;
+    padding-right: 20px;
+  }
 
   &__aside {
+    display: none;
     flex: 0 0 230px;
     max-width: 230px;
     padding-right: 25px;
+
+    @include breakpoint(large up)  {
+      display: block;
+    }
   }
 
   &__body {
     flex: 1;
     max-width: 100%;
-    padding-left: 72px;
-    padding-right: 62px;
+
+    @include breakpoint(large up)  {
+      padding-left: 72px;
+      padding-right: 62px;
+    }
   }
 
   &__sidebar {
+    display: none;
     flex: 0 0 142px;
     max-width: 142px;
+
+    @include breakpoint(large up)  {
+      display: block;
+    }
+  }
+
+  &__content {
+    padding-left: 20px;
+    padding-right: 20px;
+
+    @include breakpoint(large up)  {
+      padding-left: 0;
+      padding-right: 0;
+    }
   }
 }
@@ -21,7 +21,9 @@
   }
 
   &__body {
-    padding-top: 15px;
+    @include breakpoint(large up)  {
+      padding-top: 15px;
+    }
 
     & > * + * {
       margin-top: 25px;

@@ -57,6 +57,10 @@
 @import "components/field";
 @import "components/breadcrumbs";
 @import "components/highlight";
+@import "components/search";
+@import "components/navbar-mobile";
+@import "components/menu-button";
+@import "components/search-button";
 @import "components/callout";
 @import "components/panel";
 @import "components/nav";