Reactjs抽屉动画影响页面上的其他元素

Question

示例图片提供了一个票价想法：

我有两个主要组件

1. 第一个组件（ NewsFeed ）默认状态为展开大小（1000px）
2. 第二个组件（聊天）默认状态为已折叠（200px），其中只有人名头像显示在列表中。

两个聊天子组件

1. PeopleList ，用于呈现人员列表。默认状态为可见，大小为200px（聊天组件的大小为已折叠状态。）
2. ChatBox ，用于呈现用户与其员工之间的对话。默认状态为隐藏，大小为400px。

场景

1. 点击聊天组件中的人名会展开它，显示附加在 PeopleList 右侧的 ChatBox 组件，其中 >聊天声明更改为展开和 ChatBox 状态为可见将 NewsFeed 组件更改为< em>已折叠状态，其大小已缩小，以便在新状态（展开）中容纳聊天组件。

感谢。