Refactor code structure for improved readability and maintainability

app/src/components/layout/sidebarLeft/Assets.tsx

@@ -1,16 +1,20 @@
 import React, { useEffect, useMemo, useState } from "react";
 import Search from "../../ui/inputs/Search";
-import vehicle from "../../../assets/image/vehicles.png";
-import workStation from "../../../assets/image/workStation.png";
-import machines from "../../../assets/image/machines.png";
-import feneration from "../../../assets/image/feneration.png";
-import worker from "../../../assets/image/worker.png";
 import { getCategoryAsset } from "../../../services/factoryBuilder/assest/assets/getCategoryAsset";
 import arch from "../../../assets/gltf-glb/arch.glb";
 import door from "../../../assets/gltf-glb/door.glb";
 import window from "../../../assets/gltf-glb/window.glb";
 import { fetchAssets } from "../../../services/marketplace/fetchAssets";
 import { useSelectedItem } from "../../../store/store";
+
+// images -------------------
+import vehicle from "../../../assets/image/categories/vehicles.png";
+import workStation from "../../../assets/image/categories/workStation.png";
+import machines from "../../../assets/image/categories/machines.png";
+import feneration from "../../../assets/image/categories/feneration.png";
+import worker from "../../../assets/image/categories/worker.png";
+// -------------------------------------
+
 interface AssetProp {
   filename: string;
   thumbnail?: string;

app/src/styles/abstracts/mixins.scss

@@ -9,3 +9,25 @@
   justify-content: space-between;
   align-items: center;
 }
+
+// Array of base colors
+$colors: (
+  #f5550b,
+  #1bac1b,
+  #0099ff,
+  #d4c927,
+  #8400ff, 
+  #13e9b3, 
+  #df1dcf 
+);
+
+@mixin gradient-by-child($index) {
+  // Get the color based on the index passed
+  $base-color: nth($colors, $index);
+  // Apply gradient using the same color with different alpha values
+  background: linear-gradient(
+    144.19deg,
+    rgba($base-color, 0.2) 16.62%,  // 20% opacity
+    rgba($base-color, 0.08) 85.81%   // 80% opacity
+  );
+}

app/src/styles/layout/sidebar.scss

@@ -1075,19 +1075,55 @@
 
         &::after {
           content: "";
-          width: 50px;
+          width: 60px;
-          height: 50px;
+          height: 60px;
           border-radius: 50%;
           background-color: var(--circle-color, #000);
           position: absolute;
-          top: 50%;
+          top: 60%;
           right: -10px;
           transform: translate(0, -50%);
-          background: linear-gradient(
+        }
-            144.19deg,
+        &:nth-child(1), &:nth-child(9) {
-            #f1e7cd 16.62%,
+          &::after {
-            #fffaef 85.81%
+            @include gradient-by-child(1); // First child uses the first color
-          );
+          }
+        }
+
+        &:nth-child(2), &:nth-child(10) {
+          &::after {
+            @include gradient-by-child(2); // Second child uses the second color
+          }
+        }
+
+        &:nth-child(3), &:nth-child(11) {
+          &::after {
+            @include gradient-by-child(3); // Third child uses the third color
+          }
+        }
+
+        &:nth-child(4), &:nth-child(12) {
+          &::after {
+            @include gradient-by-child(4); // Fourth child uses the fourth color
+          }
+        }
+
+        &:nth-child(5), &:nth-child(13) {
+          &::after {
+            @include gradient-by-child(5); // Fifth child uses the fifth color
+          }
+        }
+
+        &:nth-child(6), &:nth-child(14) {
+          &::after {
+            @include gradient-by-child(6); // Fifth child uses the fifth color
+          }
+        }
+
+        &:nth-child(7), &:nth-child(15) {
+          &::after {
+            @include gradient-by-child(7); // Fifth child uses the fifth color
+          }
         }
 
         .category-image {
@@ -1133,9 +1169,11 @@
           padding: 8px;
           width: 100%;
           font-size: var(--font-size-regular);
-          background: color-mix(in srgb,
+          background: color-mix(
+            in srgb,
             var(--background-color) 40%,
-            transparent);
+            transparent
+          );
           backdrop-filter: blur(5px);
           opacity: 0;
           transition: opacity 0.3s ease;