From ffce798ce838f2423eac17a5fe4f72da9e9ccef6 Mon Sep 17 00:00:00 2001
From: Supra4E8C <tan13318527080@163.com>
Date: Tue, 17 Mar 2026 00:53:14 +0800
Subject: [PATCH] feat(sidebar): add backdrop for improved sidebar interaction

---
 src/components/layout/MainLayout.tsx |  9 +++++++++
 src/styles/layout.scss               | 23 +++++++++++++++++++++++
 2 files changed, 32 insertions(+)

diff --git a/src/components/layout/MainLayout.tsx b/src/components/layout/MainLayout.tsx
index 81ace68..7043364 100644
--- a/src/components/layout/MainLayout.tsx
+++ b/src/components/layout/MainLayout.tsx
@@ -759,6 +759,15 @@ export function MainLayout() {
       </header>
 
       <div className="main-body">
+        <button
+          type="button"
+          className={`sidebar-backdrop ${sidebarOpen ? 'visible' : ''}`}
+          onClick={() => setSidebarOpen(false)}
+          aria-label={t('common.close')}
+          aria-hidden={!sidebarOpen}
+          tabIndex={sidebarOpen ? 0 : -1}
+        />
+
         <aside
           className={`sidebar ${sidebarOpen ? 'open' : ''} ${sidebarCollapsed ? 'collapsed' : ''}`}
         >
diff --git a/src/styles/layout.scss b/src/styles/layout.scss
index 27a4045..7c38ab0 100644
--- a/src/styles/layout.scss
+++ b/src/styles/layout.scss
@@ -442,6 +442,29 @@
   }
 }
 
+.sidebar-backdrop {
+  display: none;
+  border: 0;
+  padding: 0;
+  margin: 0;
+  background: rgb(15 23 42 / 0.18);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity $transition-fast;
+
+  @media (max-width: $breakpoint-mobile) {
+    display: block;
+    position: fixed;
+    inset: var(--header-height) 0 0;
+    z-index: $z-dropdown - 1;
+
+    &.visible {
+      opacity: 1;
+      pointer-events: auto;
+    }
+  }
+}
+
 .sidebar {
   width: 240px;
   background: var(--bg-primary);