transitionning between the chatcontainer and the sidebar in mobile display

[Med-Fedi-Adel]

Hello , it's not really an issue but I'm working with this library and I'm having hard time to write a bit of code to transition from the chatContainer to the Sidebar by clicking on the Back arrow located in the start of Conversation Header. I just need a bit of help in the css and state management to make the sidebar appear with full width on the screen and the ChatContainer is hidden.

Example :

When I click on this back arrow for example :

My goal is something similar to this :

[notzane]

Try something like this, call setShowSidebar(true) in your back button and false when you tap a thread.

const [showSidebar, setShowSidebar] = useState(true); // start with sidebar showing

return (
  <MainContainer>
    {showSidebar ? ( // if true render the sidebar content
      <Sidebar>
        { sidebar content }
      </Sidebar>
    ) : ( // else render the chat content
      <ChatContainer>
        { chat content }
      </ChatContainer>
    )
 </MainContainer>
)

[vishalbhan]

Here's the implementation from the chatscope storybook: https://chatscope.io/storybook/react/?path=/docs/components-maincontainer--default-story#toggle-conversation-list-using-the-back-button

[supersnager]

@vishalbhan gave an answer so I'm closing the issue. @Med-Fedi-Adel if you still have problem with this, please reopen.