From 4ea6d1e7a3b0b8952b43f02e2694adc507e02d31 Mon Sep 17 00:00:00 2001
From: Tom Butcher <thomasbutcher15@gmail.com>
Date: Thu, 20 Aug 2026 21:05:45 +0100
Subject: [PATCH] Enhance DashboardSidebar with CollapsedItemIcon and Tooltip
 integration

- Introduced a new CollapsedItemIcon component to improve the display of sidebar items when collapsed, providing additional context through tooltips.
- Updated the DashboardSidebar to utilize the CollapsedItemIcon for better user experience and visual clarity when navigating collapsed sidebar items.
- Enhanced code readability by organizing the new component and its prop types within the DashboardSidebar file.
---
 .../Dashboard/common/DashboardSidebar.jsx     | 31 +++++++++++++++++--
 1 file changed, 29 insertions(+), 2 deletions(-)

diff --git a/src/components/Dashboard/common/DashboardSidebar.jsx b/src/components/Dashboard/common/DashboardSidebar.jsx
index 5461c1b9..67181982 100644
--- a/src/components/Dashboard/common/DashboardSidebar.jsx
+++ b/src/components/Dashboard/common/DashboardSidebar.jsx
@@ -1,4 +1,4 @@
-import { useState, useEffect, useContext } from 'react'
+import { cloneElement, isValidElement, useState, useEffect, useContext } from 'react'
 import { Layout, Menu, Flex, Button } from 'antd'
 import { CaretDownFilled } from '@ant-design/icons'
 import CollapseSidebarIcon from '../../Icons/CollapseSidebarIcon'
@@ -12,8 +12,29 @@ import { getSidebarIconNode } from '../../Icons/sidebarIconMap'
 import SimpleBar from 'simplebar-react'
 import { useThemeContext } from '../context/ThemeContext'
 import { filterSidebarItemsByListPermission } from '../../../database/Sidebars'
+import Tooltip from './Tooltip'
 const { Sider } = Layout
 
+const CollapsedItemIcon = ({ className, icon, title }) => {
+  const iconNode = isValidElement(icon)
+    ? cloneElement(icon, {
+        className: [icon.props.className, className].filter(Boolean).join(' ')
+      })
+    : icon
+
+  return (
+    <Tooltip title={title}>
+      {iconNode ?? <span className={className} />}
+    </Tooltip>
+  )
+}
+
+CollapsedItemIcon.propTypes = {
+  className: PropTypes.string,
+  icon: PropTypes.node,
+  title: PropTypes.node
+}
+
 const DashboardSidebar = ({
   items = [],
   selectedKey = '',
@@ -52,9 +73,15 @@ const DashboardSidebar = ({
         return item
       }
 
+      const icon = item.icon || getSidebarIconNode(item.iconKey)
       const mappedItem = {
         key: item.key,
-        icon: item.icon || getSidebarIconNode(item.iconKey),
+        icon:
+          collapsed && !isMobile ? (
+            <CollapsedItemIcon title={item.label} icon={icon} />
+          ) : (
+            icon
+          ),
         label: item.label
       }