(Feat) O3-2801 Icons across O3 Navigation MVP

packages/esm-patient-common-lib/src/dashboards/DashboardExtension.tsx

@@ -3,7 +3,22 @@ import classNames from 'classnames';
 import last from 'lodash-es/last';
 import { useTranslation } from 'react-i18next';
 import { useLocation } from 'react-router-dom';
-import { ConfigurableLink } from '@openmrs/esm-framework';
+import {
+  ConfigurableLink,
+  ActivityIcon,
+  ShoppingCartIcon,
+  MedicationIcon,
+  ChartAverageIcon,
+  CalendarHeatMapIcon,
+  WarningIcon,
+  ListCheckedIcon,
+  DocumentAttachmentIcon,
+  EventScheduleIcon,
+  ReportIcon,
+  SyringeIcon,
+  ProgramsIcon,
+} from '@openmrs/esm-framework';
+import styles from './dashboard-extension.scss';
 
 export interface DashboardExtensionProps {
   path: string;
@@ -22,13 +37,40 @@ export const DashboardExtension = ({
   const location = useLocation();
   const navLink = useMemo(() => decodeURIComponent(last(location.pathname.split('/'))), [location.pathname]);
 
+  type MenuTitle = keyof typeof MenuIcons;
+
+  const MenuIcons = {
+    'Patient Summary': ReportIcon,
+    'Vitals & Biometrics': ActivityIcon,
+    Medications: MedicationIcon,
+    Orders: ShoppingCartIcon,
+    Results: ChartAverageIcon,
+    Visits: CalendarHeatMapIcon,
+    Allergies: WarningIcon,
+    Conditions: ListCheckedIcon,
+    Immunizations: SyringeIcon,
+    Attachments: DocumentAttachmentIcon,
+    Programs: ProgramsIcon,
+    Appointments: EventScheduleIcon,
+  } as const;
+
+  const menuIcon = (title: MenuTitle) => {
+    const Icon = MenuIcons[title];
+    return Icon ? <Icon className={styles.icon} /> : null;
+  };
+
+  const renderIcon = menuIcon(title as MenuTitle);
+
   return (
     <div key={path}>
       <ConfigurableLink
         className={classNames('cds--side-nav__link', { 'active-left-nav-link': path === navLink })}
         to={`${basePath}/${encodeURIComponent(path)}`}
       >
-        {t(title)}
+        <span className={styles.menu}>
+          {renderIcon}
+          <span>{t(title)}</span>
+        </span>
       </ConfigurableLink>
     </div>
   );

packages/esm-patient-common-lib/src/dashboards/dashboard-extension.scss

@@ -0,0 +1,8 @@
+.menu {
+  display: flex;
+  align-items: center;
+}
+
+.icon {
+  margin-right: 0.5rem;
+}