The LeftSidebar is not working properly when used simultaneously in both a modal and a page

Atlassian Ecosystem Design
1

Hi Atlassian team,

We are working with Forge and have included the LeftSidebar component in both a page and a modal component, which is triggered from this page by a button, as you can see in the video:

https://jam.dev/c/af400db3-8716-4091-9da7-ecf875c250ee

It seems that the LeftSidebar is using the same reference or applying the same CSS style when we expand or collapse it in the modal.

We tried several workarounds:

  • Updating the PageLayout component to the latest version, 3.11.2
  • Placing the modal component outside the PageLayout of the main page
  • Placing the modal component inside the PageLayout of the main page
  • Assigning a different id value to each LeftSidebar

We managed to achieve some results by overriding the following styles:

[data-ds--page-layout--slot='main'] {
  width: 100%;
}

[data-ds--page-layout--slot='left-sidebar'] {
  ${(props) => props.isPreviewGuideModalOpen && `width: 450px;`}
}

[data-testid='guide-edit-left-sidebar-resize-children-wrapper'] {
  ${(props) => props.isPreviewGuideModalOpen && 'visibility: visible;'}
  ${(props) => props.isPreviewGuideModalOpen && 'opacity: inherit;'}
}

However, the issue persists: if we collapse the LeftSidebar in the modal, it also collapses on the main page.

On the main page, we have the following structure:

<PageLayout>
  <Content>
    <LeftSidebar isFixed={false} width={450} collapsedState="expanded">
      Here is the tree step list
    </LeftSidebar>
  </Content>
</PageLayout>

In the modal component, we have a similar structure:

<PageLayout>
  <Content>
    <LeftSidebar isFixed={false} width={450} collapsedState="expanded">
    </LeftSidebar>
  </Content>
</PageLayout>

This might be a bug, but I wanted to check in case I’m missing something. Thanks in advance!