refactor: animated sidebar

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>
+    </>
   );
 };