diff options
Diffstat (limited to 'site/js/burger-manu-click-handler.js')
-rw-r--r-- | site/js/burger-manu-click-handler.js | 39 |
1 files changed, 39 insertions, 0 deletions
diff --git a/site/js/burger-manu-click-handler.js b/site/js/burger-manu-click-handler.js new file mode 100644 index 0000000..6030c0b --- /dev/null +++ b/site/js/burger-manu-click-handler.js @@ -0,0 +1,39 @@ +document.addEventListener('click', (e) => { + const burgerMenuIcon = document.getElementById('burgerMenu') + const closeBurgerMenuIcon = document.getElementById('closeIcon') + const bottomPartBurgerMenu = document.getElementById('bottomPartOfBurgerMenu') + const navigation = document.getElementById('navigation') + + function openBurgerMenu() { + burgerMenuIcon.classList.remove('visible') + burgerMenuIcon.classList.add('not__visible') + + closeBurgerMenuIcon.classList.remove('not__visible') + closeBurgerMenuIcon.classList.add('visible') + + bottomPartBurgerMenu.classList.remove('not__visible') + bottomPartBurgerMenu.classList.add('visible') + + navigation.classList.add('background__white') + } + + function closeBurgerMenu() { + burgerMenuIcon.classList.remove('not__visible') + burgerMenuIcon.classList.add('visible') + + closeBurgerMenuIcon.classList.remove('visible') + closeBurgerMenuIcon.classList.add('not__visible') + + bottomPartBurgerMenu.classList.remove('visible') + bottomPartBurgerMenu.classList.add('not__visible') + + } + + if (e.target?.id === 'burgerMenu') { + openBurgerMenu() + } + if (e.target?.id === 'closeIcon' || + e.target?.id === 'bottomPartOfBurgerMenu') { + closeBurgerMenu() + } +}) |