From 06885a9692a2bee72bf1dfe5ced996aa1929faca Mon Sep 17 00:00:00 2001
From: Alexandre Bourlier <alexandre@happy-dev.fr>
Date: Mon, 14 May 2018 18:41:38 +0200
Subject: [PATCH] Search view opening and closing complete

---
 src/html/menu.html   |  1 +
 src/html/search.html |  2 +-
 src/js/hd-app.js     |  6 +++++-
 src/scss/_menu.scss  | 16 ++++++++++++++--
 4 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/src/html/menu.html b/src/html/menu.html
index 91570b1..8b711a9 100644
--- a/src/html/menu.html
+++ b/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>
diff --git a/src/html/search.html b/src/html/search.html
index 2703e17..02ff668 100644
--- a/src/html/search.html
+++ b/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>
diff --git a/src/js/hd-app.js b/src/js/hd-app.js
index d58e473..9d36a67 100644
--- a/src/js/hd-app.js
+++ b/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");
+  }
 });
diff --git a/src/scss/_menu.scss b/src/scss/_menu.scss
index 8ad5a54..682866c 100644
--- a/src/scss/_menu.scss
+++ b/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;
+        }
       }
     }
   }