Search view opening and closing complete

src/html/menu.html

@@ -37,5 +37,6 @@
   <div id="search-bar">
     <input id="search-input" class="form-control" type="search" placeholder="ctrl + k"/>
     <i id="search-icon" class="fa fa-search" aria-hidden="true"></i>
+    <i id="close-search-icon" class="fa fa-times" aria-hidden="true"></i>
   </div>
 </nav>

src/html/search.html

@@ -1,5 +1,5 @@
 <div id="search-view">
-  <div class="content">
+  <div class="content container-fluid">
     Search results here
   </div>
 </div>

src/js/hd-app.js

@@ -21,10 +21,14 @@ document.addEventListener("DOMContentLoaded", function(event) {
 
   // Open the search bar via touch / click
   searchBar.querySelector("#search-icon").addEventListener("click", openSearchBar);
-
   function openSearchBar(e) {
     navBar.classList.add("search-mode");
     searchBar.querySelector("#search-input").focus();
     searchView.classList.add("search-mode");
   }
+  searchBar.querySelector("#close-search-icon").addEventListener("click", closeSearchBar);
+  function closeSearchBar(e) {
+    navBar.classList.remove("search-mode");
+    searchView.classList.remove("search-mode");
+  }
 });

src/scss/_menu.scss

@@ -22,7 +22,7 @@
       padding-left:         30px;
       padding-right:        0px;
       transition-property:  opacity;
-      transition-duration:  0.3s;
+      transition-duration:  0.2s;
       opacity:              1;
     }
 
@@ -55,7 +55,7 @@
       transform:            scaleX(0);
       transform-origin:     100%;
       transition-property:  all;
-      transition-duration:  0.3s;
+      transition-duration:  0.2s;
       position:             absolute;
       top:                  0px;
       right:                0px;
@@ -76,6 +76,10 @@
       &:hover {
         color:  $hd-color;
       }
+
+      &#close-search-icon {
+        display : none;
+      }
     }
   }
 
@@ -96,6 +100,14 @@
       i {
         color:                white;
         background-color:     $twitter-color;
+
+        &#search-icon {
+          display : none;
+        }
+
+        &#close-search-icon {
+          display : inline-block;
+        }
       }
     }
   }