diff --git a/sass/menu.scss b/sass/menu.scss new file mode 100644 index 0000000..693da18 --- /dev/null +++ b/sass/menu.scss @@ -0,0 +1,46 @@ +@import "variables"; + +.menu--language-selector { + &.menu { + display: flex; + flex-direction: column; + position: relative; + list-style: none; + padding: 0; + margin: 0; + } + &.open { + .menu__dropdown { + display: flex; + } + } + .menu { + &__trigger { + color: var(--accent); + border: 2px solid; + margin-left: 10px; + height: 100%; + padding: 3px 8px; + margin-bottom: 0 !important; + position: relative; + cursor: pointer; + } + &__dropdown { + left: auto; + right: 0; + display: none; + flex-direction: column; + position: absolute; + background: var(--background); + box-shadow: 0 10px var(--background), -10px 10px var(--background), 10px 10px var(--background); + color: var(--accent); + border: 2px solid var(--accent); + margin: 0; + padding: 10px; + top: 10px; + left: 0; + list-style: none; + z-index: 99; + } + } +} diff --git a/sass/style.scss b/sass/style.scss index 3a289d7..e165215 100644 --- a/sass/style.scss +++ b/sass/style.scss @@ -3,6 +3,7 @@ @import 'header'; @import 'logo'; @import 'main'; +@import 'menu'; @import 'post'; @import 'pagination'; @import 'footer'; diff --git a/static/js/menu.js b/static/js/menu.js new file mode 100644 index 0000000..3b662e7 --- /dev/null +++ b/static/js/menu.js @@ -0,0 +1,44 @@ +const container = document.querySelector(".container"); +const allMenus = document.querySelectorAll(".menu"); + +// Hide menus on body click +document.body.addEventListener("click", () => { + allMenus.forEach(menu => { + if (menu.classList.contains("open")) { + menu.classList.remove("open"); + } + }); +}); + +// Reset menus on resize +window.addEventListener("resize", () => { + allMenus.forEach(menu => { + menu.classList.remove("open"); + }); +}); + +// Handle desktop menu +allMenus.forEach(menu => { + const trigger = menu.querySelector(".menu__trigger"); + const dropdown = menu.querySelector(".menu__dropdown"); + + trigger.addEventListener("click", e => { + e.stopPropagation(); + + if (menu.classList.contains("open")) { + menu.classList.remove("open"); + } else { + // Close all menus... + allMenus.forEach(m => m.classList.remove("open")); + // ...before opening the current one + menu.classList.add("open"); + } + + if (dropdown.getBoundingClientRect().right > container.getBoundingClientRect().right) { + dropdown.style.left = "auto"; + dropdown.style.right = 0; + } + }); + + dropdown.addEventListener("click", e => e.stopPropagation()); +}); diff --git a/templates/index.html b/templates/index.html index 7970ea2..f6f348d 100644 --- a/templates/index.html +++ b/templates/index.html @@ -60,6 +60,8 @@ {%- if page %} {{ language_menu_macros::menu(page=page) }} + {%- elif section %} + {{ language_menu_macros::menu(page=section) }} {% endif -%} @@ -133,6 +135,7 @@ {% endblock footer %} + {%- block extra_body %} {% endblock extra_body -%} diff --git a/templates/macros/language_menu.html b/templates/macros/language_menu.html index a2aed82..a5dfa82 100644 --- a/templates/macros/language_menu.html +++ b/templates/macros/language_menu.html @@ -1,10 +1,10 @@ {% macro menu(page) %}