svg-layout-designer-react/src/Components/Sidebar/Sidebar.tsx

import * as React from 'react';
import { AvailableContainer } from '../../Interfaces/AvailableContainer';

interface ISidebarProps {
  componentOptions: AvailableContainer[]
  isOpen: boolean;
  onClick: () => void;
  buttonOnClick: (type: string) => void;
}

export default class Sidebar extends React.Component<ISidebarProps> {
  public render() {
    const listElements = this.props.componentOptions.map(componentOption =>
      <button className='hover:bg-blue-600 transition-all sidebar-row' key={componentOption.Type} onClick={() => this.props.buttonOnClick(componentOption.Type)}>
        {componentOption.Type}
      </button>
    );

    const isOpenClasses = this.props.isOpen ? 'left-0' : '-left-64';
    return (
      <div className={`fixed bg-blue-500 dark:bg-blue-500 text-white transition-all h-screen w-64 overflow-y-auto z-20 ${isOpenClasses}`}>
        <button className='close-button hover:bg-blue-600 justify-end' onClick={this.props.onClick}>
          Close &times;
        </button>
        <div className='bg-blue-400 sidebar-row'>
          Components
        </div>
        {listElements}
      </div>
    );
  }
}