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 fd07b4c..f6f348d 100644 --- a/templates/index.html +++ b/templates/index.html @@ -1,6 +1,7 @@ {% import "macros/date.html" as date_macros -%} {% import "macros/head.html" as head_macros -%} {% import "macros/menu.html" as menu_macros -%} +{% import "macros/language_menu.html" as language_menu_macros -%} {% import "macros/post.html" as post_macros -%} {% import "macros/title.html" as title_macros -%} @@ -57,6 +58,11 @@ + {%- if page %} + {{ language_menu_macros::menu(page=page) }} + {%- elif section %} + {{ language_menu_macros::menu(page=section) }} + {% endif -%} {% block header_menu %} @@ -129,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 new file mode 100644 index 0000000..a5dfa82 --- /dev/null +++ b/templates/macros/language_menu.html @@ -0,0 +1,12 @@ +{% macro menu(page) %} + +{% endmacro menu %}