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 @@
-
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;
+ }
}
}
}