Implement main bar + Change colors

src/index.scss

@@ -3,19 +3,45 @@
 @tailwind utilities;
 
 @layer components {
-  .sidebar-row {
-    @apply p-6 w-full
+  .sidebar-title {
+    @apply p-6 font-bold
   }
+
+  .sidebar-component {
+    @apply transition-all px-2 py-6 text-sm rounded-lg bg-slate-300/60 hover:bg-slate-300
+  }
+
   .elements-sidebar-row {
     @apply pl-6 pr-6 pt-2 pb-2 w-full
   }
+
   .close-button {
     @apply transition-all w-full h-auto p-4 flex
   }
+
   .mainmenu-btn {
     @apply transition-all bg-blue-100 hover:bg-blue-200 text-blue-700 text-lg font-semibold p-8  rounded-lg
   }
+
   .floating-btn {
     @apply h-full w-full text-white align-middle items-center justify-center
   }
+
+  .bar-btn {
+    @apply h-16 w-full p-3 bg-slate-100 hover:bg-slate-200
+    transition-all text-gray-700 hover:text-gray-600
+  }
+
+  .heroicon {
+    @apply h-full w-full align-middle items-center justify-center
+  }
+
+  .sidebar-tooltip {
+    @apply absolute w-auto p-2 m-2 min-w-max left-14
+    rounded-md shadow-md
+    text-gray-800 bg-slate-100
+    dark:text-white dark:bg-gray-800
+    text-xs font-bold
+    transition-all duration-100 scale-0 origin-left;
+  }
 }