Implement main bar + Change colors

src/Components/Sidebar/Sidebar.tsx

@@ -1,31 +1,38 @@
 import * as React from 'react';
 import { AvailableContainer } from '../../Interfaces/AvailableContainer';
+import { truncateString } from '../../utils/stringtools';
 
 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
+        className='justify-center transition-all sidebar-component'
+        key={componentOption.Type}
+        title={componentOption.Type}
+        onClick={() => this.props.buttonOnClick(componentOption.Type)}
+      >
+        {truncateString(componentOption.Type, 5)}
       </button>
     );
 
-    const isOpenClasses = this.props.isOpen ? 'left-0' : '-left-64';
+    const isOpenClasses = this.props.isOpen ? 'left-16' : '-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'>
+      <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>
-        {listElements}
+        <div className='grid grid-cols-1 md:grid-cols-3 gap-2
+         m-2 md:text-xs font-bold'>
+          {listElements}
+        </div>
       </div>
     );
   }