Implement main bar + Change colors

src/Components/Bar/Bar.tsx

@@ -0,0 +1,37 @@
+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: React.FC<IBarProps> = (props) => {
+  return (
+    <div className='fixed z-20 flex flex-col top-0 left-0 h-screen 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>
+  );
+};

src/Components/Bar/BarIcon.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+
+interface IBarIconProps {
+  title: string
+  children: React.ReactElement
+  isActive: boolean
+  onClick: () => void
+}
+
+export const BarIcon: React.FC<IBarIconProps> = (props) => {
+  const isActiveClasses = props.isActive ? 'border-l-4 border-blue-500 bg-slate-200' : '';
+  return (
+    <button
+      className={`bar-btn group ${isActiveClasses}`}
+      title={props.title}
+      onClick={() => props.onClick()}
+    >
+      <span className='sidebar-tooltip group-hover:scale-100'>{props.title}</span>
+      { props.children }
+    </button>
+  );
+};