drowl87/hextra_mirror
1
0
Fork 1
mirror of https://github.com/imfing/hextra.git synced 2025-09-14 13:36:37 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix(navbar): menu positions (#804)

Browse Source 
* fix: menu positions

* refactor: factorize menu management and handle window resize

* chore: the placement is better with +4 then +10

* chore: the placement is better with -10 than -15
This commit is contained in:
Ludovic Fernandez
2025-08-30 00:09:23 +02:00
committed by GitHub
parent bbffff1f52
commit 82e25c0b0d
4 changed files with 60 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
assets/js/theme.js
View File

@@ -36,41 +36,11 @@
toggler.addEventListener("click", function (e) {
e.preventDefault();
const optionsElement = toggler.nextElementSibling;
optionsElement.classList.toggle('hx:hidden');
// Calculate the position of a language options element.
const switcherRect = toggler.getBoundingClientRect();
// Must be called before optionsElement.clientWidth.
optionsElement.style.minWidth = `${Math.max(switcherRect.width, 50)}px`;
const isOnTop = toggler.dataset.location === 'top';
const isOnBottom = toggler.dataset.location === 'bottom';
const isOnBottomRight = toggler.dataset.location === 'bottom-right';
const isRTL = document.body.dir === 'rtl'
// Stuck on the left side of the switcher.
let translateX = switcherRect.left;
if (isOnTop && !isRTL || isOnBottom && isRTL || isOnBottomRight && !isRTL) {
// Stuck on the right side of the switcher.
translateX = switcherRect.right - optionsElement.clientWidth;
}
// Stuck on the top of the switcher.
let translateY = switcherRect.top - window.innerHeight - 15;
if (isOnTop) {
// Stuck on the bottom of the switcher.
translateY = switcherRect.top - window.innerHeight + 150;
}
optionsElement.style.transform = `translate3d(${translateX}px, ${translateY}px, 0)`;
toggleMenu(toggler);
});
});
window.addEventListener("resize", () => themeToggleButtons.forEach(resizeMenu))
// Dismiss the menu when clicking outside
document.addEventListener('click', (e) => {