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

import { ClockIcon, CubeIcon, MapIcon } from '@heroicons/react/outline';
import * as React from 'react';
import { BarIcon } from './BarIcon';

interface IBarProps {
  isSidebarOpen: boolean
  isElementsSidebarOpen: boolean
  isHistoryOpen: boolean
  ToggleSidebar: () => void
  ToggleElementsSidebar: () => void
  ToggleTimeline: () => void
}

export const BAR_WIDTH = 64; // 4rem

export const Bar: React.FC<IBarProps> = (props) => {
  return (
    <div className='fixed z-20 flex flex-col top-0 left-0 h-full w-16 bg-slate-100'>
      <BarIcon
        isActive={props.isSidebarOpen}
        title='Components'
        onClick={() => props.ToggleSidebar()}>
        <CubeIcon className='heroicon'/>
      </BarIcon>
      <BarIcon
        isActive={props.isElementsSidebarOpen}
        title='Map'
        onClick={() => props.ToggleElementsSidebar()}>
        <MapIcon className='heroicon'/>
      </BarIcon>
      <BarIcon
        isActive={props.isHistoryOpen}
        title='Timeline'
        onClick={() => props.ToggleTimeline()}>
        <ClockIcon className='heroicon'/>
      </BarIcon>
    </div>
  );
};