Refactor DashboardSidebar to support recursive item mapping

- Introduced a recursive function to map sidebar items and their children, enhancing the structure and maintainability of the component.
- Added onClick functionality for items with paths, improving navigation capabilities.
- Improved code readability by restructuring the item mapping logic.

src/components/Dashboard/common/DashboardSidebar.jsx

@@ -38,18 +38,35 @@ const DashboardSidebar = ({
     if (onCollapse) onCollapse(newCollapsed)
   }
 
-  // Add onClick to each item
+  // Recursive function to map items and their children
-  const _items = items.map((item) => {
+  const mapItemsRecursively = (items) => {
-    if (item?.type == 'divider') {
+    return items.map((item) => {
+      if (item?.type === 'divider') {
         return item
       }
-    return {
+
+      const mappedItem = {
         key: item.key,
         icon: item.icon,
-      label: item.label,
+        label: item.label
-      onClick: () => navigate(item.path)
       }
+
+      // Add onClick for items with paths (leaf nodes)
+      if (item.path) {
+        mappedItem.onClick = () => navigate(item.path)
+      }
+
+      // Recursively map children if they exist
+      if (item?.children && Array.isArray(item.children)) {
+        mappedItem.children = mapItemsRecursively(item.children)
+      }
+
+      return mappedItem
     })
+  }
+
+  // Map items recursively
+  const _items = mapItemsRecursively(items)
 
   if (isMobile) {
     return (