From 1ea2899bf457fb2f6e9e89ec567c8f7d83bf8e1b Mon Sep 17 00:00:00 2001
From: hypercross <helios.tnak@gmail.com>
Date: Thu, 26 Feb 2026 15:02:28 +0800
Subject: [PATCH] refactor: animated sidebar

---
 src/components/Sidebar.tsx | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index 5b6861c..51fdcd0 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -141,14 +141,20 @@ export const Sidebar: Component<SidebarProps> = (props) => {
   });
 
   return (
-    <Show when={props.isOpen}>
+    <>
       {/* 遮罩层 */}
       <div
-        class="fixed inset-0 bg-black/50 z-40"
+        class={`fixed inset-0 bg-black/50 z-40 transition-opacity duration-300 ease-in-out ${
+          props.isOpen ? "opacity-100" : "opacity-0 pointer-events-none"
+        }`}
         onClick={props.onClose}
       />
       {/* 侧边栏 */}
-      <aside class="fixed top-0 left-0 h-full w-64 bg-white shadow-lg z-50 overflow-y-auto">
+      <aside
+        class={`fixed top-0 left-0 h-full w-64 bg-white shadow-lg z-50 overflow-y-auto transform transition-transform duration-300 ease-in-out ${
+          props.isOpen ? "translate-x-0" : "-translate-x-full"
+        }`}
+      >
         <div class="p-4">
           <div class="flex items-center justify-between mb-4">
             <h2 class="text-lg font-bold text-gray-900">目录</h2>
@@ -194,6 +200,6 @@ export const Sidebar: Component<SidebarProps> = (props) => {
           </Show>
         </div>
       </aside>
-    </Show>
+    </>
   );
 };