ByoungSooPark/modeling-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

hide closed panels via css instead of unmounting them from dome (test)

Browse Source
This commit is contained in:
Andrew Varga
2025-06-13 17:17:53 +02:00
parent af8d1330fd
commit d3d837c54d
2 changed files with 26 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/ModelingSidebar/ModelingPane.tsx
View File

@ -17,6 +17,7 @@ export interface ModelingPaneProps {
Menu?: React.ReactNode | React.FC
detailsTestId?: string
onClose: () => void
style?: React.CSSProperties
}
export const ModelingPaneHeader = ({
@ -64,11 +65,13 @@ export const ModelingPane = ({
detailsTestId,
onClose,
title,
style,
...props
}: ModelingPaneProps) => {
return (
<section
{...props}
style={style}
aria-label={title && typeof title === 'string' ? title : ''}
data-testid={detailsTestId}
id={id}

43
src/components/ModelingSidebar/ModelingSidebar.tsx
View File

@ -298,26 +298,29 @@ export function ModelingSidebar() {
(context.store?.openPanes.length >= 1 ? `w-full` : `hidden`)
}
>
{filteredPanes
.filter((pane) => context?.store.openPanes.includes(pane.id))
.map((pane) => (
<ModelingPane
key={pane.id}
icon={pane.icon}
title={pane.sidebarName}
onClose={() => {}}
id={`${pane.id}-pane`}
>
{pane.Content instanceof Function ? (
<pane.Content
id={pane.id}
onClose={() => togglePane(pane.id)}
/>
) : (
pane.Content
)}
</ModelingPane>
))}
{filteredPanes.map((pane) => (
<ModelingPane
key={pane.id}
icon={pane.icon}
title={pane.sidebarName}
onClose={() => {}}
id={`${pane.id}-pane`}
style={
context?.store.openPanes.includes(pane.id)
? {}
: { display: 'none' }
}
>
{pane.Content instanceof Function ? (
<pane.Content
id={pane.id}
onClose={() => togglePane(pane.id)}
/>
) : (
pane.Content
)}
</ModelingPane>
))}
</ul>
</div>
</Resizable>