Add new search bar functionality

cloud/static/assets/js/layout.min.js

@@ -0,0 +1,26 @@
+
+/* Interactions
+   ================================================================== */
+$('#searchButton').click(function(){
+  showSearch()
+})
+$('#searchCloseButton').click(function(){
+  closeSearch()
+})
+
+
+
+/* Functions
+   ================================================================== */
+function showSearch() {
+  $('#searchbarNav').addClass('active')
+  $('#searchbarNav input').focus()
+  $('#navbarNav').addClass('invisible')
+  // $('#search-overlay').addClass('active')
+}
+
+function closeSearch() {
+  $('#searchbarNav').removeClass('active')
+  $('#navbarNav').removeClass('invisible')
+  // $('#search-overlay').removeClass('active')
+}

src/scripts/layout.js

@@ -0,0 +1,26 @@
+
+/* Interactions
+   ================================================================== */
+$('#searchButton').click(function(){
+  showSearch()
+})
+$('#searchCloseButton').click(function(){
+  closeSearch()
+})
+
+
+
+/* Functions
+   ================================================================== */
+function showSearch() {
+  $('#searchbarNav').addClass('active')
+  $('#searchbarNav input').focus()
+  $('#navbarNav').addClass('invisible')
+  // $('#search-overlay').addClass('active')
+}
+
+function closeSearch() {
+  $('#searchbarNav').removeClass('active')
+  $('#navbarNav').removeClass('invisible')
+  // $('#search-overlay').removeClass('active')
+}

src/styles/_navbar.sass

@@ -14,11 +14,9 @@ nav.navbar
   &.sticky-top
     +media-breakpoint-down(sm)
       position: static
-  .logo
-    display: flex
-    justify-content: center
   .navbar-brand
     padding: .3125rem 0
+    z-index: 1002
   .navbar-toggler
     padding: 0
     border-radius: 0
@@ -88,6 +86,8 @@ nav.navbar
     transition: none
     display: none
   #navbarNav
+    &.invisible
+      visibility: hidden
     .dropdown-toggle::after
       display:none !important
     &.show
@@ -147,4 +147,46 @@ nav.navbar
     padding-top: 4px
     padding-bottom: 0
     padding-right: 0
-    outline: none
+    outline: none
+
+#searchbarNav
+  background-color: #fff
+  position: absolute
+  display: none
+  align-items: center
+  justify-content: center
+  width: calc(100% - 40px)
+  max-height: 56px
+  z-index: 1001
+  +media-breakpoint-up(md)
+    width: calc(100% - 25px)
+  &.active
+    display: flex
+  .search-container
+    position: relative
+    max-width: 560px
+    width: 100%
+  input
+    padding: 8px 20px
+    color: #4d4e53
+    box-shadow: none
+    border: 1px solid #999
+    border-radius: 4
+    border-bottom-color: none
+    background-color: #fff
+    font-size: 18px
+    transition: border-color 150ms ease-in-out, box-shadow 150ms ease-in-out
+    width: 100%
+    max-width: 560px
+  .search-icon
+    position: absolute
+    top: 11px
+    right: 0px
+#searchCloseButton
+  cursor: pointer
+  position: absolute
+  right: 20px
+// #search-overlay.active {
+//   opacity: 1;
+//   visibility: visible;
+//   background-color: rgba(67,89,112,0.7

src/templates/layout.pug

@@ -93,6 +93,14 @@ html(lang="en")
 					span
 					span
 					span
+				//- Search Bar
+				#searchbarNav
+					span.search-container
+						input#cloud-search(type="text", placeholder="Search assets, tutorials...")
+						a
+							i.search-icon.pi-search
+					a#searchCloseButton(ahref="#")
+						img(src="{{ url_for('static', filename='assets/img/icons/icon-close-button.svg') }}", alt="alt")
 				//- Links
 				#navbarNav.collapse.navbar-collapse.justify-content-end
 					ul.navbar-nav
@@ -140,7 +148,7 @@ html(lang="en")
 									class="{% if category == 'services' %}active{% endif %}") Services
   						
 						li.nav-item.search-icon
-							a.navbar-item
+							a#searchButton.navbar-item(data-toggle='collpase', data-target='#searchbarNav', href="#")
 								i.pi-search
 						| {% endblock navigation_sections %}
 
@@ -263,6 +271,7 @@ html(lang="en")
 		script(src="https://code.jquery.com/jquery-3.3.1.min.js", integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=", crossorigin="anonymous")
 		script(src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js", integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49", crossorigin="anonymous")
 		script(src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js", integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em", crossorigin="anonymous")
+		script(src="{{ url_for('static_cloud', filename='assets/js/layout.min.js') }}")
 
 		| {% if current_user.is_authenticated %}
 		script(src="{{ url_for('static_pillar', filename='assets/js/vendor/jquery.typewatch-3.0.0.min.js') }}")