From eec05c4eaa8703f5afed5800864a5f5a9e5e0a4d Mon Sep 17 00:00:00 2001
From: parsa aghaei <p.aghaei@hoshmand.local>
Date: Mon, 3 Aug 2026 11:44:21 +0330
Subject: [PATCH] feat(ux): add outside click backdrop dismissal for mobile
 filters and drawer menus [TASK-12.1]

---
 .../application/components/ArchivePage.tsx    | 14 ++-
 frontend/application/components/Header.tsx    | 85 ++++++++++---------
 2 files changed, 58 insertions(+), 41 deletions(-)

diff --git a/frontend/application/components/ArchivePage.tsx b/frontend/application/components/ArchivePage.tsx
index 1853a97..874bb32 100644
--- a/frontend/application/components/ArchivePage.tsx
+++ b/frontend/application/components/ArchivePage.tsx
@@ -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>
diff --git a/frontend/application/components/Header.tsx b/frontend/application/components/Header.tsx
index 818b0b1..2890502 100644
--- a/frontend/application/components/Header.tsx
+++ b/frontend/application/components/Header.tsx
@@ -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>