Added drop down icon for menu items that have sub menu items #3138

glific · Dec 15, 2024 · d5e1c8a · d5e1c8a
1 parent 3e5857e
commit d5e1c8a
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 1 deletion.
diff --git a/src/components/UI/Layout/Navigation/SideMenus/SideMenus.module.css b/src/components/UI/Layout/Navigation/SideMenus/SideMenus.module.css
@@ -146,3 +146,12 @@
     transform: scale3d(1, 1, 1);
   }
 }
+.ExpandedIcon {
+  color: #717971;
+  margin-left: auto;
+}
+
+.CollapsedIcon {
+  color: #717971;
+  margin-left: auto;
+}
diff --git a/src/components/UI/Layout/Navigation/SideMenus/SideMenus.tsx b/src/components/UI/Layout/Navigation/SideMenus/SideMenus.tsx
@@ -18,7 +18,7 @@ import { getSideDrawerMenus } from 'context/role';
 import styles from './SideMenus.module.css';
 import { useTranslation } from 'react-i18next';
 import { Menu } from 'config/menu';
-
+import { ArrowDropDown } from '@mui/icons-material';
 export interface SideMenusProps {
   opened: boolean;
 }
@@ -176,6 +176,16 @@ const SideMenus = ({ opened }: SideMenusProps) => {
           });
 
       const links = menu.children ? {} : { component: NavLink, to: parentredirectPath };
+      const dropdownArrow = menu.children && (
+        <ArrowDropDown
+          className={isSelected ? styles.ExpandedIcon : styles.CollapsedIcon}
+          style={{
+            transform: isSelected ? 'rotate(180deg)' : 'rotate(0deg)',
+            transition: 'transform 0.5s ease',
+          }}
+        />
+      );
+
       let listItemButton = (
         <ListItemButton
           disableRipple
@@ -199,6 +209,7 @@ const SideMenus = ({ opened }: SideMenusProps) => {
             />
           </ListItemIcon>
           {opened && (
+            <>
             <ListItemText
               disableTypography
               data-testid="list-item"
@@ -207,6 +218,8 @@ const SideMenus = ({ opened }: SideMenusProps) => {
               }
               primary={t(menu.title as any)}
             />
+            {dropdownArrow}
+            </>
           )}
           {menu.new && <span className={styles.New}>{'New'}</span>}
         </ListItemButton>