adding desktop search functionality

opentech/static_src/src/javascript/components/desktop-search.js

+class DesktopSearch {
+    static selector() {
+        return '.js-desktop-search-toggle';
+    }
+
+    constructor(node, searchForm) {
+        this.node = node;
+        this.searchForm = searchForm;
+        this.bindEventListeners();
+    }
+
+    bindEventListeners() {
+        this.node.click(this.toggle.bind(this));
+    }
+
+    toggle() {
+        this.searchForm[0].classList.toggle('is-visible');
+        this.node[0].querySelector('.header__icon--magnifying-glass').classList.toggle('is-hidden');
+        this.node[0].querySelector('.header__icon--cross').classList.toggle('is-unhidden');
+    }
+}
+
+export default DesktopSearch;

opentech/static_src/src/javascript/main.js

 import $ from './globals';
 import MobileMenu from './components/mobile-menu';
 import MobileSubMenu from './components/mobile-sub-menu';
+import DesktopSearch from './components/desktop-search';
 
 // Open the mobile menu callback
 function openMobileMenu() {
@@ -23,6 +24,10 @@ $(function () {
         new MobileSubMenu($(el));
     });
 
+    $(DesktopSearch.selector()).each((index, el) => {
+        new DesktopSearch($(el), $('.header__search--desktop'));
+    });
+
     // Toggle subnav visibility
     $('.js-subnav-back').on('click', function(){
         this.parentNode.classList.remove('is-visible');

opentech/static_src/src/sass/layout/_header.scss

@@ -114,6 +114,19 @@
     }
 
     &__icon {
+        &--cross {
+            @extend %is-hidden;
+        }
+
+        &--pixels {
+            position: absolute;
+            bottom: 0;
+            display: none;
+
+            @include media-query(tablet-portrait) {
+                display: block;
+            }
+        }
 
         &--pixels-left {
             left: 0;
@@ -130,4 +143,19 @@
         }
     }
 
+    &__search {
+        &--desktop {
+            @extend %is-invisible;
+            position: absolute;
+            top: 0;
+            left: 0;
+            display: flex;
+            align-items: flex-end;
+            justify-content: center;
+            width: 100%;
+            height: 180px;
+            padding-bottom: 50px;
+            background: $color--dark-blue;
+        }
+    }
 }

opentech/templates/base.html

@@ -89,12 +89,26 @@
                     <div class="header__inner--top">
                         {% primarynav %}
 
+                        <button class="button js-desktop-search-toggle">
+                            <svg class="header__icon header__icon--magnifying-glass icon"><use xlink:href="#magnifying-glass"></use></svg>
+                            <svg class="header__icon header__icon--cross icon"><use xlink:href="#cross"></use></svg>
+                        </button>
                     </div>
                 </section>
 
                 <section class="header__menus header__menus--mobile">
                     {% primarynav %}
                 </section>
+
+            </div>
+
+            <div class="header__search header__search--desktop">
+                <form action="{% url 'search' %}" method="get" role="search" class="form form--header-search-desktop">
+                    <button class="button" type="submit">
+                        <svg class="icon icon--magnifying-glass"><use xlink:href="#magnifying-glass"></use></svg>
+                    </button>
+                    <input class="input input--transparent" type="text" placeholder="Search…" name="query"{% if search_query %} value="{{ search_query }}{% endif %}">
+                </form>
             </div>
 
             <div class="wrapper wrapper--small">