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

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

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

function handleDragStart(event: React.DragEvent<HTMLButtonElement>): void {
  event.dataTransfer.setData('type', (event.target as HTMLButtonElement).id);
}

export const Sidebar: React.FC<ISidebarProps> = (props: ISidebarProps) => {
  const listElements = props.componentOptions.map(componentOption =>
    <button
      className='justify-center transition-all sidebar-component'
      key={componentOption.Type}
      id={componentOption.Type}
      title={componentOption.Type}
      onClick={() => props.buttonOnClick(componentOption.Type)}
      draggable={true}
      onDragStart={(event) => handleDragStart(event)}
    >
      {truncateString(componentOption.Type, 5)}
    </button>
  );

  const isOpenClasses = props.isOpen ? 'left-16' : '-left-64';
  return (
    <div className={`fixed z-10 bg-slate-200
      text-gray-700 transition-all h-screen w-64
      overflow-y-auto ${isOpenClasses}`}>
      <div className='bg-slate-100 sidebar-title'>
          Components
      </div>
      <div className='grid grid-cols-1 md:grid-cols-3 gap-2
         m-2 md:text-xs font-bold'>
        {listElements}
      </div>
    </div>
  );
};