React Chat Page with Leftbar, Toggle and Bot Component

I am trying to create a chat page with React.

The UI is pretty similar to Chatgpt. There is a leftbar, a toggle button that opens and closes the leftbar and the chat component.

The toggle is vertically middle alligned. And it should be middle alligned though the chat component can be increased with new chats.

Can someone help?

I am currently using something like:

<div> {/* Sidebar */} <div className={ui left demo vertical sidebar labeled icon Grid ${visible ? 'visible' : ''}`} style={{paddingTop:'1%', width: '17%', paddingLeft:'1%', paddingRight:'1%', overflowX:'hidden', backgroundColor:'white'}}>

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

Right now the Icon is not properly alligned. It is on the top of the page.

I can try to use Grid to have Icon and Chat as 2 Grid Columns, but then the Icon will be scrollable and not vertically alligned.

Your code snippet is not so clear. As I undestood, you want to create a layout which is quite similar to chatGPT. The following code will do the trick in this case.

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

This is just the skeleton... you can improve on this.