fix: preserve sidebar subtree across drawer state
This commit is contained in:
@@ -178,10 +178,9 @@ export function SidebarProvider({
|
||||
export function Sidebar({ id, className, ...props }: ComponentProps<"aside">) {
|
||||
const { isMobile, open, openMobile, setOpenMobile } = useSidebar();
|
||||
const sidebar = <aside id={id ?? "chat-sidebar"} data-sidebar="sidebar" data-slot="sidebar" data-state={open ? "expanded" : "collapsed"} data-mobile-open={openMobile} className={cn("flex min-h-0 shrink-0 flex-col", className)} {...props} />;
|
||||
if (!isMobile || !openMobile) return sidebar;
|
||||
return <>
|
||||
<button type="button" data-sidebar="scrim" data-slot="sidebar-scrim" aria-label="关闭聊天记录" className="sidebar-scrim" onClick={() => setOpenMobile(false)} />
|
||||
{sidebar}
|
||||
{isMobile && openMobile ? <button type="button" data-sidebar="scrim" data-slot="sidebar-scrim" aria-label="关闭聊天记录" className="sidebar-scrim" onClick={() => setOpenMobile(false)} /> : null}
|
||||
</>;
|
||||
}
|
||||
|
||||
|
||||
@@ -45,7 +45,12 @@ test("provides the mobile drawer closing surface", () => {
|
||||
assert.match(sidebar, /data-slot="sidebar-scrim"/);
|
||||
assert.match(sidebar, /aria-label="关闭聊天记录"/);
|
||||
assert.match(sidebar, /onClick=\{\(\) => setOpenMobile\(false\)\}/);
|
||||
assert.match(sidebar, /if \(!isMobile \|\| !openMobile\) return sidebar;/);
|
||||
assert.match(sidebar, /isMobile && openMobile \? <button/);
|
||||
});
|
||||
|
||||
test("keeps the sidebar subtree stable while toggling its mobile scrim", () => {
|
||||
const sidebar = readProjectFile("src/components/ui/sidebar.tsx");
|
||||
assert.match(sidebar, /return <>\s*\{sidebar\}\s*\{isMobile && openMobile \? <button/);
|
||||
});
|
||||
|
||||
test("cancels a stale mobile drawer focus frame", () => {
|
||||
|
||||
Reference in New Issue
Block a user