hypercross
/
ttrpg-tools
2
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

refactor: animated sidebar

This commit is contained in:
hypercross 2026-02-26 15:02:28 +08:00
parent 83e8a89f22
commit 1ea2899bf4
1 changed files with 10 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/Sidebar.tsx
View File

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