diff --git a/src/scripts/layout.js b/src/scripts/layout.js index 6bd19f4..9e9a376 100644 --- a/src/scripts/layout.js +++ b/src/scripts/layout.js @@ -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() + } } \ No newline at end of file diff --git a/src/styles/_navbar.sass b/src/styles/_navbar.sass index 4edfc8a..5c73f4c 100644 --- a/src/styles/_navbar.sass +++ b/src/styles/_navbar.sass @@ -170,7 +170,6 @@ nav.navbar padding-bottom: 0 padding-right: 0 outline: none - #searchNav display: flex align-items: center @@ -218,8 +217,4 @@ nav.navbar cursor: pointer position: absolute right: 16px - top: 12px -// #search-overlay.active { -// opacity: 1; -// visibility: visible; -// background-color: rgba(67,89,112,0.7 \ No newline at end of file + top: 12px \ No newline at end of file