使用 Leftbar、Toggle 和 Bot 组件响应聊天页面

Question

我正在尝试使用 React 创建一个聊天页面。

用户界面与 Chatgpt 非常相似。有一个左栏、一个用于打开和关闭左栏和聊天组件的切换按钮。

切换开关垂直居中对齐。尽管可以通过新的聊天来增加聊天组件，但它应该是中间对齐的。

有人可以帮忙吗？

我目前正在使用类似的东西：

<div>       {/* Sidebar */} <div className={

ui 左侧演示垂直侧边栏标记图标网格 ${visible ? '可见' : ''}`} style={{paddingTop:'1%', width:'17%', paddingLeft:'1%', paddingRight:'1%',overflowX:'隐藏',backgroundColor:'白色'}}>

    {/* Pusher */}
    <div className="pusher">  
    <Icon onClick={handleToggle} name={visible ? 'chevron right' : 'chevron left'} style={{ alignSelf: 'center', marginBottom: 0 }} />
  
      <Chat />
    </div>
        
</div>`

现在图标未正确对齐。它位于页面顶部。

我可以尝试使用网格将图标和聊天作为 2 个网格列，但图标将是可滚动的并且不会垂直对齐。

Answer 1

您的代码片段不太清楚。正如我所理解的，您想要创建一个与 chatGPT 非常相似的布局。在这种情况下，以下代码可以解决问题。

const App = () => {
  const [isNavVisible, setIsNavVisible] = useState(true);

  const hadleClick = () => {
    setIsNavVisible(prevValue => !prevValue);
  }
  
  return (
      <main style={{minHeight: '100vh'}}>
        <div id='left-area' style={{position: 'fixed', display: 'flex',height: '100vh'}}>
          {isNavVisible && <nav style={{flex: 1, overflowY: 'auto', width: '300px'}}>
            NAV-BAR
          </nav>}
          <div style={{display: 'flex', justifyContent: 'center', alignItems: 'center', width: '50px'}}>
            <button onClick={hadleClick}>
              {isNavVisible ? 'close' : 'open'}
            </button>
          </div>
        </div>
        <div id='right-area' style={{marginLeft: `${isNavVisible ? '350px' : '50px'}`}}>
          CHAT AREA
        </div>
      </main>
  );
}

export default App

这只是骨架...您可以对此进行改进。