feat(ux): add outside click backdrop dismissal for mobile filters and drawer menus [TASK-12.1]
This commit is contained in:
parsa aghaei
parent
443b08ed58
commit
eec05c4eaa
@ -414,9 +414,17 @@ export default function ArchivePage({
|
||||
|
||||
<div className="flex flex-col lg:flex-row gap-8">
|
||||
|
||||
{/* Mobile Overlay Backdrop */}
|
||||
{isMobileFilterOpen && (
|
||||
<div
|
||||
className="lg:hidden fixed inset-0 bg-black/50 z-40 backdrop-blur-xs transition-opacity"
|
||||
onClick={() => setIsMobileFilterOpen(false)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Sidebar Filters - Collapsible on Mobile */}
|
||||
<aside className={`lg:w-72 flex-shrink-0 space-y-6 ${isMobileFilterOpen ? 'block' : 'hidden lg:block'}`}>
|
||||
<div className="bg-white rounded-[2rem] p-6 border border-medical-gray-200 shadow-sm">
|
||||
<aside className={`lg:w-72 flex-shrink-0 space-y-6 ${isMobileFilterOpen ? 'fixed inset-y-0 right-0 z-50 w-4/5 max-w-xs bg-white p-6 overflow-y-auto shadow-2xl space-y-6' : 'hidden lg:block'}`}>
|
||||
<div className="bg-white rounded-[2rem] lg:p-6 border-0 lg:border lg:border-medical-gray-200 shadow-none lg:shadow-sm">
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<div className="flex items-center gap-2">
|
||||
<Filter className="w-5 h-5 text-canina-blue" />
|
||||
@ -424,7 +432,7 @@ export default function ArchivePage({
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setIsMobileFilterOpen(false)}
|
||||
className="lg:hidden text-xs text-medical-gray-400 font-bold"
|
||||
className="lg:hidden text-xs text-medical-gray-400 font-bold p-1 hover:text-red-500"
|
||||
>
|
||||
بستن ✕
|
||||
</button>
|
||||
|
||||
@ -400,47 +400,56 @@ export default function Header({
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Mobile Navigation Drawer */}
|
||||
{/* Mobile Navigation Drawer & Backdrop */}
|
||||
<AnimatePresence>
|
||||
{isMobileMenuOpen && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, height: 0 }}
|
||||
animate={{ opacity: 1, height: "auto" }}
|
||||
exit={{ opacity: 0, height: 0 }}
|
||||
className="lg:hidden bg-white border-b border-medical-gray-200 px-4 py-6 space-y-4"
|
||||
>
|
||||
<form onSubmit={handleSearch} className="relative mb-4">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="جستجو در محصولات..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className="w-full bg-medical-gray-50 border border-medical-gray-200 rounded-xl py-3 pr-10 pl-4 text-xs font-bold"
|
||||
/>
|
||||
<Search className="w-4 h-4 text-medical-gray-400 absolute right-3 top-1/2 -translate-y-1/2" />
|
||||
</form>
|
||||
<>
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
onClick={() => setIsMobileMenuOpen(false)}
|
||||
className="lg:hidden fixed inset-0 bg-black/50 z-40 backdrop-blur-xs"
|
||||
/>
|
||||
<motion.div
|
||||
initial={{ opacity: 0, height: 0 }}
|
||||
animate={{ opacity: 1, height: "auto" }}
|
||||
exit={{ opacity: 0, height: 0 }}
|
||||
className="lg:hidden relative z-50 bg-white border-b border-medical-gray-200 px-4 py-6 space-y-4 shadow-xl"
|
||||
>
|
||||
<form onSubmit={handleSearch} className="relative mb-4">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="جستجو در محصولات..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className="w-full bg-medical-gray-50 border border-medical-gray-200 rounded-xl py-3 pr-10 pl-4 text-xs font-bold"
|
||||
/>
|
||||
<Search className="w-4 h-4 text-medical-gray-400 absolute right-3 top-1/2 -translate-y-1/2" />
|
||||
</form>
|
||||
|
||||
<div className="space-y-2 text-sm font-black">
|
||||
<Link href="/shop" onClick={() => setIsMobileMenuOpen(false)} className="block p-3 rounded-xl bg-medical-gray-50 text-medical-gray-900">
|
||||
🛒 محصولات تخصصی کانینا
|
||||
</Link>
|
||||
<Link href="/catalog" onClick={() => setIsMobileMenuOpen(false)} className="block p-3 rounded-xl hover:bg-medical-gray-50 text-medical-gray-800">
|
||||
📑 کاتالوگ آنلاین و دوز مصرفی
|
||||
</Link>
|
||||
<Link href="/wiki" onClick={() => setIsMobileMenuOpen(false)} className="block p-3 rounded-xl hover:bg-medical-gray-50 text-medical-gray-800">
|
||||
🧬 دانشنامه علمی
|
||||
</Link>
|
||||
<Link href="/blog" onClick={() => setIsMobileMenuOpen(false)} className="block p-3 rounded-xl hover:bg-medical-gray-50 text-medical-gray-800">
|
||||
📰 مجله سلامت پت
|
||||
</Link>
|
||||
<Link href="/videos" onClick={() => setIsMobileMenuOpen(false)} className="block p-3 rounded-xl hover:bg-medical-gray-50 text-medical-gray-800">
|
||||
🎥 آکادمی ویدئویی و مشاوره دامپزشک
|
||||
</Link>
|
||||
<Link href="/profile" onClick={() => setIsMobileMenuOpen(false)} className="block p-3 rounded-xl hover:bg-medical-gray-50 text-medical-gray-800">
|
||||
🐾 شناسنامه و سوابق سلامت پت
|
||||
</Link>
|
||||
</div>
|
||||
</motion.div>
|
||||
<div className="space-y-2 text-sm font-black">
|
||||
<Link href="/shop" onClick={() => setIsMobileMenuOpen(false)} className="block p-3 rounded-xl bg-medical-gray-50 text-medical-gray-900">
|
||||
🛒 محصولات تخصصی کانینا
|
||||
</Link>
|
||||
<Link href="/catalog" onClick={() => setIsMobileMenuOpen(false)} className="block p-3 rounded-xl hover:bg-medical-gray-50 text-medical-gray-800">
|
||||
📑 کاتالوگ آنلاین و دوز مصرفی
|
||||
</Link>
|
||||
<Link href="/wiki" onClick={() => setIsMobileMenuOpen(false)} className="block p-3 rounded-xl hover:bg-medical-gray-50 text-medical-gray-800">
|
||||
🧬 دانشنامه علمی
|
||||
</Link>
|
||||
<Link href="/blog" onClick={() => setIsMobileMenuOpen(false)} className="block p-3 rounded-xl hover:bg-medical-gray-50 text-medical-gray-800">
|
||||
📰 مجله سلامت پت
|
||||
</Link>
|
||||
<Link href="/videos" onClick={() => setIsMobileMenuOpen(false)} className="block p-3 rounded-xl hover:bg-medical-gray-50 text-medical-gray-800">
|
||||
🎥 آکادمی ویدئویی و مشاوره دامپزشک
|
||||
</Link>
|
||||
<Link href="/profile" onClick={() => setIsMobileMenuOpen(false)} className="block p-3 rounded-xl hover:bg-medical-gray-50 text-medical-gray-800">
|
||||
🐾 شناسنامه و سوابق سلامت پت
|
||||
</Link>
|
||||
</div>
|
||||
</motion.div>
|
||||
</>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user