This commit is contained in:
林玮 (Jade Lin) 2024-09-18 08:52:18 +00:00 committed by GitHub
commit 8e57c927c0
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 110 additions and 0 deletions

46
sass/menu.scss Normal file
View file

@ -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;
}
}
}

View file

@ -3,6 +3,7 @@
@import 'header';
@import 'logo';
@import 'main';
@import 'menu';
@import 'post';
@import 'pagination';
@import 'footer';

44
static/js/menu.js Normal file
View file

@ -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());
});

View file

@ -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 @@
</div>
</a>
</div>
{%- if page %}
{{ language_menu_macros::menu(page=page) }}
{%- elif section %}
{{ language_menu_macros::menu(page=section) }}
{% endif -%}
</div>
{% block header_menu %}
@ -129,6 +135,7 @@
{% endblock footer %}
</div>
<script type="text/javascript" src="/js/menu.js"></script>
{%- block extra_body %}
{% endblock extra_body -%}
</body>

View file

@ -0,0 +1,12 @@
{% macro menu(page) %}
<ul class="menu menu--desktop menu--language-selector">
<li class="menu__trigger">{{ trans(key="Language", lang=page.lang) }}&nbsp;</li>
<li>
<ul class="menu__dropdown">
{%- for item in page.translations %}
<li><a href="{{ item.permalink }}">{{ trans(key=item.lang, lang=page.lang) }}</a></li>
{% endfor -%}
</ul>
</li>
</ul>
{% endmacro menu %}