Siklos
293af45144
All checks were successful
continuous-integration/drone/push Build is passing
Moved all module functions to separate utils modules Replaced standard with standard with typescript Extracted UI elements to separate component Reviewed-on: https://git.siklos-chaneru.duckdns.org/Siklos/svg-layout-designer-react/pulls/15
32 lines
1.1 KiB
TypeScript
32 lines
1.1 KiB
TypeScript
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.PureComponent<ISidebarProps> {
|
|
public render(): JSX.Element {
|
|
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 ×
|
|
</button>
|
|
<div className='bg-blue-400 sidebar-row'>
|
|
Components
|
|
</div>
|
|
{listElements}
|
|
</div>
|
|
);
|
|
}
|
|
}
|