jalil/jalil.arfaoui.net
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Menu mobile plein écran, CSS-only (checkbox hack), suppression JS menu

Browse source
This commit is contained in:
Jalil Arfaoui 2026-03-12 12:06:10 +01:00
parent 0d9ac31099
commit cb4ae6af52
3 changed files with 74 additions and 79 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
src/assets/js/main.js
View file

@ -16,7 +16,6 @@ document.addEventListener("DOMContentLoaded", () => {
stickyHeaderFuncionality();
applyMenuItemClasses();
evaluateHeaderPosition();
mobileMenuFunctionality();
});
window.stickyHeaderFuncionality = () => {
@ -33,54 +32,19 @@ window.evaluateHeaderPosition = () => {
);
headerElement.classList.add(...stickyClasses);
headerElement.classList.remove(...unstickyClasses);
document.getElementById("menu").classList.add("top-[56px]");
document.getElementById("menu").classList.remove("top-[75px]");
} else {
headerElement.firstElementChild.classList.remove(...stickyClassesContainer);
headerElement.firstElementChild.classList.add(...unstickyClassesContainer);
headerElement.classList.add(...unstickyClasses);
headerElement.classList.remove(...stickyClasses);
document.getElementById("menu").classList.remove("top-[56px]");
document.getElementById("menu").classList.add("top-[75px]");
}
};
window.applyMenuItemClasses = () => {
const menuItems = document.querySelectorAll("#menu a");
const menuItems = document.querySelectorAll("#menu a, #mobileMenu a");
for (let i = 0; i < menuItems.length; i++) {
if (menuItems[i].pathname === window.location.pathname) {
menuItems[i].classList.add("text-neutral-900", "dark:text-white");
}
}
};
function mobileMenuFunctionality() {
document.getElementById("openMenu").addEventListener("click", () => {
openMobileMenu();
});
document.getElementById("closeMenu").addEventListener("click", () => {
closeMobileMenu();
});
}
window.openMobileMenu = () => {
document.getElementById("openMenu").classList.add("hidden");
document.getElementById("closeMenu").classList.remove("hidden");
document.getElementById("menu").classList.remove("hidden");
document.getElementById("mobileMenuBackground").classList.add("opacity-0");
document.getElementById("mobileMenuBackground").classList.remove("hidden");
setTimeout(() => {
document
.getElementById("mobileMenuBackground")
.classList.remove("opacity-0");
}, 1);
};
window.closeMobileMenu = () => {
document.getElementById("closeMenu").classList.add("hidden");
document.getElementById("openMenu").classList.remove("hidden");
document.getElementById("menu").classList.add("hidden");
document.getElementById("mobileMenuBackground").classList.add("hidden");
};

114
src/components/header.astro
View file

@ -29,6 +29,9 @@ const menus = {
const currentMenus = menus[currentLang] || menus.fr;
---
<!-- Hidden checkbox to control mobile menu state (CSS-only) -->
<input type="checkbox" id="menuToggle" class="hidden peer" aria-hidden="true" />
<!-- This is an invisible div with relative position so that it takes up the height of the menu (because menu is absolute/fixed) -->
<div class="relative w-full h-20 opacity-0 pointer-events-none"></div>
<header id="header" class="absolute top-0 z-50 w-full h-20">
@ -36,18 +39,13 @@ const currentMenus = menus[currentLang] || menus.fr;
class="flex items-center justify-between h-full max-w-5xl pl-6 pr-4 mx-auto border-b border-l-0 border-r-0 border-transparent select-none lg:border-r lg:border-l lg:rounded-b-xl"
>
<Logo />
<button
id="mobileMenuBackground"
type="button"
aria-label={t('ui', 'closeMenu', currentLang)}
class="fixed inset-0 z-20 hidden w-screen h-screen duration-300 ease-out bg-white/90 dark:bg-neutral-950/90 appearance-none border-0 p-0 cursor-default"
>
</button>
<nav
class="relative z-30 flex flex-row-reverse justify-start w-full text-sm sm:justify-end text-neutral-500 dark:text-neutral-400 sm:flex-row"
>
<div
id="openMenu"
<!-- Hamburger button (open) -->
<label
for="menuToggle"
aria-label={t('ui', 'openMenu', currentLang)}
class="flex flex-col items-end justify-center w-6 h-6 ml-4 cursor-pointer sm:hidden"
>
<svg
@ -59,38 +57,14 @@ const currentMenus = menus[currentLang] || menus.fr;
viewBox="0 0 24 24"
stroke="currentColor"><path d="M4 8h16M4 16h16"></path></svg
>
</div>
<div
id="closeMenu"
class="flex flex-col items-end justify-center hidden w-6 h-6 ml-4 -translate-x-1 cursor-pointer sm:hidden"
>
<svg
class="w-6 h-6 text-neutral-600 dark:text-neutral-200"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
viewBox="0 0 24 24"
stroke="currentColor"><path d="M6 18L18 6M6 6l12 12"></path></svg
>
</div>
<div
id="menu"
class="fixed top-[75px] ease-out duration-300 sm:top-0 w-full left-0 sm:py-0 pt-7 pb-4 dm:mx-0 left-0 z-40 flex-col items-end justify-start hidden w-full h-auto text-sm sm:text-base sm:h-auto sm:relative sm:flex-row sm:flex sm:text-sm sm:w-auto sm:pr-0 sm:pt-0"
>
<div
class="absolute inset-0 top-0 right-0 block w-full h-full px-3 sm:hidden"
>
<div
class="relative w-full h-full bg-white border border-dashed border-neutral-300 dark:border-neutral-700 backdrop-blur-sm rounded-xl dark:bg-neutral-950"
>
</div>
</div>
</label>
<!-- Desktop menu -->
<div id="menu" class="hidden sm:flex sm:flex-row sm:h-auto sm:w-auto sm:text-sm">
{
currentMenus.map((menu) => (
<a
href={menu.url}
class="relative flex items-center justify-center w-full px-3 py-2 font-medium tracking-wide text-center duration-200 ease-out sm:py-0 sm:mb-0 md:w-auto hover:text-neutral-900 dark:hover:text-white"
class="relative flex items-center justify-center px-3 font-medium tracking-wide text-center duration-200 ease-out hover:text-neutral-900 dark:hover:text-white"
>
{menu.name}
</a>
@ -101,8 +75,64 @@ const currentMenus = menus[currentLang] || menus.fr;
</div>
</header>
<script is:inline>
document.getElementById('mobileMenuBackground').addEventListener('click', function () {
window.closeMobileMenu();
});
</script>
<!-- Mobile fullscreen menu (sibling of checkbox, outside header) -->
<div
id="mobileMenu"
class="mobile-menu fixed top-0 left-0 z-[100] flex-col items-center justify-center bg-white dark:bg-neutral-950"
>
<!-- Close button -->
<label
for="menuToggle"
aria-label={t('ui', 'closeMenu', currentLang)}
class="absolute top-6 right-6 w-8 h-8 cursor-pointer"
>
<svg
class="w-8 h-8 text-neutral-600 dark:text-neutral-200"
fill="none"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
viewBox="0 0 24 24"
stroke="currentColor"><path d="M6 18L18 6M6 6l12 12"></path></svg
>
</label>
{
currentMenus.map((menu) => (
<a
href={menu.url}
class="flex items-center justify-center px-3 py-4 text-2xl font-medium tracking-wide text-neutral-700 dark:text-neutral-300 hover:text-neutral-900 dark:hover:text-white duration-200 ease-out"
>
{menu.name}
</a>
))
}
</div>
<style>
/* Mobile menu: hidden by default, shown when checkbox is checked */
.mobile-menu {
display: none;
overflow: hidden;
width: 100dvw;
height: 100dvh;
}
#menuToggle:checked ~ .mobile-menu {
display: flex;
}
/* Hide menu on desktop regardless of checkbox state */
@media (min-width: 640px) {
.mobile-menu {
display: none !important;
}
}
</style>
<style is:global>
/* Block page scroll when mobile menu is open */
html:has(#menuToggle:checked) body {
position: fixed;
inset: 0;
overflow: hidden;
}
</style>

1
src/utils/i18n.ts
View file

@ -64,6 +64,7 @@ export const translations = {
lightMode: { fr: 'Mode clair', en: 'Light mode', ar: 'الوضع الفاتح' },
},
ui: {
openMenu: { fr: 'Ouvrir le menu', en: 'Open menu', ar: 'فتح القائمة' },
closeMenu: { fr: 'Fermer le menu', en: 'Close menu', ar: 'إغلاق القائمة' },
changeTheme: { fr: 'Changer le thème', en: 'Change theme', ar: 'تغيير المظهر' },
themeAuto: { fr: 'Thème : automatique', en: 'Theme: auto', ar: 'المظهر: تلقائي' },