diff --git a/assets/js/app.js b/assets/js/app.js index 2c4466c..10fa287 100644 --- a/assets/js/app.js +++ b/assets/js/app.js @@ -2,6 +2,7 @@ import './external_links'; import './message_icons'; import './forms'; import './copyable_text'; +import './main_menu'; import '../sass/app.scss'; diff --git a/assets/js/main_menu.js b/assets/js/main_menu.js new file mode 100644 index 0000000..f2a89da --- /dev/null +++ b/assets/js/main_menu.js @@ -0,0 +1,17 @@ +document.addEventListener('DOMContentLoaded', () => { + const menuButton = document.getElementById('menu-button'); + const mainMenu = document.getElementById('main-menu'); + + menuButton.addEventListener('click', (e) => { + e.stopPropagation(); + mainMenu.classList.toggle('open'); + }); + + mainMenu.addEventListener('click', (e) => { + e.stopPropagation(); + }); + + document.addEventListener('click', () => { + mainMenu.classList.remove('open'); + }); +}); \ No newline at end of file diff --git a/assets/sass/layout.scss b/assets/sass/layout.scss index 3537169..2185a98 100644 --- a/assets/sass/layout.scss +++ b/assets/sass/layout.scss @@ -76,13 +76,13 @@ header { } } - a:hover { + a:hover, a:active { background-color: rgba(255, 255, 255, 0.07); } } } - .hamburger { + #menu-button { display: none; } } @@ -90,17 +90,29 @@ header { @media (max-width: $menuLayoutSwitchTreshold) { flex-direction: row-reverse; + .logo { + padding: 0 16px 0 8px; + font-size: 24px; + + img { + margin-right: 8px; + } + } + nav { - flex: 1; - .hamburger { + #menu-button { display: block; + margin: 0; padding: 0 16px; + line-height: $headerHeight; + cursor: pointer; + background: transparent; + border-radius: 0; - width: max-content; - - &:hover { - width: auto; + .feather { + --icon-size: 28px; + margin: 0 8px; } } @@ -112,10 +124,10 @@ header { transition: transform ease-out 150ms; background-color: $headerBackground; - } - .hamburger:hover + ul, ul:hover { - transform: translateX(0%); + &.open { + transform: translateX(0%); + } } } } diff --git a/views/layouts/base.njk b/views/layouts/base.njk index 7aafc89..f87c6aa 100644 --- a/views/layouts/base.njk +++ b/views/layouts/base.njk @@ -14,8 +14,8 @@ {% block header %}