Add dismiss Searchbar with Esc key

This commit is contained in:
Sam Lu
2018-08-06 11:53:23 -05:00
parent ab98261889
commit 053570e55d
2 changed files with 10 additions and 6 deletions

View File

@@ -7,6 +7,7 @@ var searchButton = document.querySelector('#searchButton'),
navbarNav = document.querySelector('#navbarNav'),
profileMenu = document.querySelector('#navbarNav .navbar-nav').lastElementChild
/* Interactions
================================================================== */
searchButton.addEventListener('click', showSearch)
@@ -24,10 +25,18 @@ function showSearch() {
searchNavInput.focus()
navbarNav.classList.add('hidden')
profileMenu.classList.add('visible')
document.addEventListener('keyup', onPressEscCloseSearch)
}
function closeSearch() {
searchNav.classList.add('hidden')
navbarNav.classList.remove('hidden')
profileMenu.classList.remove('visible')
document.removeEventListener('keyup', onPressEscCloseSearch)
}
function onPressEscCloseSearch(e) {
if (e.keyCode == 27) {
closeSearch()
}
}

View File

@@ -170,7 +170,6 @@ nav.navbar
padding-bottom: 0
padding-right: 0
outline: none
#searchNav
display: flex
align-items: center
@@ -219,7 +218,3 @@ nav.navbar
position: absolute
right: 16px
top: 12px
// #search-overlay.active {
// opacity: 1;
// visibility: visible;
// background-color: rgba(67,89,112,0.7