I have a side menu and when it opens an overlay will be shown but I don't know why when I click on that the whole page become white instead of close the side menu and when I used inspect I realized that the code has changed . (it was working well till yesterday but today I found this problem without changing anything.) here is my header section code (I'm using tailwind css and alpine js)
<body dir="rtl" class="select-none ">
<div x-data="dropdown" class="relative z-40">
<!-- header -->
<header class="z-40 bg-white">
<div
class="relative flex flex-row-reverse items-center justify-between w-full h-16 px-4 lg:h-24 lg:container lg:justify-start lg:flex-row lg:px-16 gap-x-6">
<img src="./Assets/imgs/Icons-Logos/snappTextLogo.svg" alt="snappTextLogo" />
<div @click="toggle" class=" lg:hidden">
<img x-show="!open" class="inline-block size-8" src="./Assets/imgs/Icons-Logos/menuIcon.svg"
alt="menuIcon-bars" />
<img x-show="open" class="inline-block size-8" src="./Assets/imgs/Icons-Logos/closeIcon.svg"
alt="closeIcon" />
</div>
<!-- side menu in responsve mode -->
<ul x-show="open" x-transition x-data="{ sideItem : { superApp : false , aboutUs : false, download: false } }"
class="max-w-[500px] overflow-y-scroll cursor-pointer w-full h-screen lg:hidden flex flex-col bg-white text-black/60 *:p-4 absolute top-[64px] right-0 border-t">
<li class="flex flex-col !py-2">
<span @click="sideItem.superApp = !sideItem.superApp" class="flex justify-between">
<p class="font-bold text-black">سوپراپ اسنپ</p>
<img x-show="!sideItem.superApp" class=" size-4 stroke-black"
src="./Assets/imgs/Icons-Logos/arrowdown.svg" alt="arrowdown">
<img x-show="sideItem.superApp" class=" size-4 stroke-black" src="./Assets/imgs/Icons-Logos/arrowup.svg"
alt="arrowup">
</span>
<div class="pr-2 overflow-hidden">
<ul x-show="sideItem.superApp" x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="-translate-y-full opacity-0 transition" x-transition:enter-end="translate-y-1"
x-transition:leave="transition ease-in duration-300" x-transition:leave-start="translate-y-1"
x-transition:leave-end="-translate-y-full opacity-0 transition"
class="relative pt-4 space-y-4 text-black/60">
<li class="">درخواست تاکسی</li>
<li class="">پیک موتوری</li>
<li class="">سفارش آنلاین غذا</li>
<li class="">سوپرمارکت</li>
<li class="">رزرو بلیط هواپیما</li>
<li class="">رزرو بلیط قطار</li>
<li class="">رزرو بلیط اتوبوس</li>
<li class="">رزرو هتل</li>
<li class="">درخواست وانت بار</li>
<li class="">خدمات اسباب‌کشی</li>
<li class="">پزشک و مشاور</li>
</ul>
</div>
</li>
<li>
ثبت‌نام راننده اسنپ
<span class="text-green-500">(سواری، موتور و وانت)</span>
</li>
<li>باشگاه رانندگان</li>
<li>پنل سازمانی</li>
<li>بلاگ</li>
<li>
<span @click="sideItem.aboutUs = !sideItem.aboutUs" class="relative flex justify-between">
<p class="font-bold text-black">درباره‌ی اسنپ</p>
<img x-show="!sideItem.aboutUs" class=" size-4 stroke-black" src="./Assets/imgs/Icons-Logos/arrowdown.svg"
alt="arrowdown">
<img x-show="sideItem.aboutUs" class=" size-4 stroke-black" src="./Assets/imgs/Icons-Logos/arrowup.svg"
alt="arrowup">
</span>
<div x-show="sideItem.aboutUs" class="pr-2 overflow-hidden">
<ul x-show="sideItem.aboutUs" x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="-translate-y-full opacity-0 transition" x-transition:enter-end="translate-y-1"
x-transition:leave="transition ease-in duration-300" x-transition:leave-start="translate-y-1"
x-transition:leave-end="-translate-y-full opacity-0 transition"
class="relative pt-4 space-y-4 text-black/60">
<li>فرصت های شغلی</li>
<li>درباره ما</li>
<li>تماس با ما</li>
</ul>
</div>
</li>
<hr class="!py-2 mx-4">
<li class="flex flex-col !py-0 !my-0">
<span @click="sideItem.download = !sideItem.download" class="relative flex justify-between">
<p class="font-bold text-green-500">اپلیکیشن اسنپ</p>
<img x-show="!sideItem.download" class=" size-4 stroke-green-500"
src="./Assets/imgs/Icons-Logos/arrowdown.svg" alt="arrowdown">
<img x-show="sideItem.download" class=" size-4 stroke-green-500"
src="./Assets/imgs/Icons-Logos/arrowup.svg" alt="arrowup">
</span>
<div x-show="sideItem.download" class="pr-2 overflow-y-scroll">
<ul x-show="sideItem.download" x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="-translate-y-full opacity-0 transition" x-transition:enter-end="translate-y-1"
x-transition:leave="transition ease-in duration-300" x-transition:leave-start="translate-y-1"
x-transition:leave-end="-translate-y-full opacity-0 transition"
class="relative pt-4 space-y-4 text-black/60">
<li>
<span class="flex">
<img style="padding-inline:4px ;" class="w-10 h-8"
src="/Assets/imgs/Icons-Logos/directdownload-icon.png" alt="directdownload-icon">
<p class="pr-1">دانلود مستقیم</p>
</span>
</li>
<li>
<span class="flex">
<img style="padding-inline:4px ;" class="w-10 h-8" src="/Assets/imgs/Icons-Logos/cafebazaar.png"
alt="cafebazaar">
<p class="pr-1">دانلود از کافه‌بازار</p>
</span>
</li>
<li>
<span class="flex">
<img style="padding-inline:4px ;" class="w-10 h-8" src="/Assets/imgs/Icons-Logos/myketmarketicon.png"
alt="myketmarketicon">
<p class="pr-1">دانلود از مایکت</p>
</span>
</li>
<li>
<span class="flex">
<img style="padding-inline:4px ;" class="w-10 h-8" src="/Assets/imgs/Icons-Logos/snapp-pwa.svg"
alt="snapp-pwa">
<p class="pr-1">وب اپلیکیشن اسنپ (iOS)</p>
</span>
</li>
<li>
<span class="flex">
<img style="padding-inline:4px ;" class="w-10 h-8" src="/Assets/imgs/Icons-Logos/apple.png"
alt="apple">
<p class="pr-1">دانلود از اپ استور</p>
</span>
</li>
</ul>
</div>
</li>
</ul>
<!-- desktop navbar -->
<ul class="hidden text-sm text-black/60 lg:justify-start lg:flex lg:gap-x-9"
x-data="{ menuItems : { superApp : false , aboutUs : false } }">
<li @mouseenter="menuItems.superApp = true" @mouseleave="menuItems.superApp = false"
class="relative flex flex-col items-center cursor-default gap-x-4">
<span class="flex items-center gap-x-2">
سوپراپ اسنپ
<img class=" size-4 stroke-black/60" src="./Assets/imgs/Icons-Logos/arrowdown.svg" alt="arrowdown">
</span>
<ul x-show="menuItems.superApp" x-transition
class="absolute *:px-4 *:py-3 rounded-lg bg-white *:cursor-pointer w-44 top-8 border">
<li class="hover:text-snappGreen hover:font-bold">درخواست تاکسی</li>
<li class="hover:text-snappGreen hover:font-bold">پیک موتوری</li>
<li class="hover:text-snappGreen hover:font-bold">سفارش آنلاین غذا</li>
<li class="hover:text-snappGreen hover:font-bold">سوپرمارکت</li>
<li class="hover:text-snappGreen hover:font-bold">رزرو بلیط هواپیما</li>
<li class="hover:text-snappGreen hover:font-bold">رزرو بلیط قطار</li>
<li class="hover:text-snappGreen hover:font-bold">رزرو بلیط اتوبوس</li>
<li class="hover:text-snappGreen hover:font-bold">رزرو هتل</li>
<li class="hover:text-snappGreen hover:font-bold">درخواست وانت بار</li>
<li class="hover:text-snappGreen hover:font-bold">خدمات اسباب‌کشی</li>
<li class="hover:text-snappGreen hover:font-bold">پزشک و مشاور</li>
</ul>
</li>
<li>ثبت‌نام راننده اسنپ</li>
<li>باشگاه رانندگان</li>
<li>پنل سازمانی</li>
<li>بلاگ</li>
<li @mouseenter="menuItems.aboutUs = true" @mouseleave="menuItems.aboutUs = false"
class="relative flex flex-col items-center cursor-default gap-x-4">
<span>
درباره‌ی اسنپ
<img class="inline-block size-4 stroke-black/60" src="./Assets/imgs/Icons-Logos/arrowdown.svg"
alt="arrowdown">
</span>
<ul x-show="menuItems.aboutUs" x-transition
class="absolute *:px-4 *:py-3 rounded-lg bg-white *:cursor-pointer w-44 top-8 border">
<li class="hover:text-snappGreen hover:font-bold">فرصت‌های شغلی</li>
<li class="hover:text-snappGreen hover:font-bold">درباره ما</li>
<li class="hover:text-snappGreen hover:font-bold">تماس با ما</li>
</ul>
</li>
</ul>
</div>
</header>
<!-- overlay -->
<div @click="closeToggle" x-show="open" class="fixed inset-0 w-full h-screen -z-10 lg:hidden bg-black/50"></div>
</div>
</body>
this is alpine code
document.addEventListener("alpine:init", () => {
Alpine.data("dropdown", () => ({
open: false,
closeToggle() {
this.open = false;
document.body.remove("overflow-hidden");
},
//remove scroll bar
toggle() {
this.open = !this.open;
if (this.open) document.body.classList.add("overflow-hidden");
if (!this.open) document.body.classList.remove("overflow-hidden");
},
}));
I want to close the menu by clicking on the overlay
To close the menu by clicking on the overlay, you need to add an event listener to the overlay element that triggers the closing function. Here's how you can modify your code to achieve that:
In this modification, I replaced @click="closeToggle" with @click.away="closeMenu". This @click.away directive listens for clicks outside of the element it's attached to, and when a click occurs, it triggers the closeMenu function. Ensure that your closeMenu function toggles the open state to close the menu.
Additionally, make sure you define the closeMenu function in your Alpine.js script section: