O3-4026 Add an icon for vitals and biometrics on the left nav

openmrs · Oct 28, 2024 · 7941c7a · 7941c7a
1 parent 9b112b9
commit 7941c7a
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 1 deletion.
diff --git a/packages/esm-patient-common-lib/src/dashboards/DashboardExtension.tsx b/packages/esm-patient-common-lib/src/dashboards/DashboardExtension.tsx
@@ -4,6 +4,8 @@ import last from 'lodash-es/last';
 import { useTranslation } from 'react-i18next';
 import { useLocation } from 'react-router-dom';
 import { ConfigurableLink } from '@openmrs/esm-framework';
+import { ActivityIcon } from '@openmrs/esm-framework';
+import styling from './dashboardextension.scss';
 
 export interface DashboardExtensionProps {
   path: string;
@@ -22,13 +24,18 @@ export const DashboardExtension = ({
   const location = useLocation();
   const navLink = useMemo(() => decodeURIComponent(last(location.pathname.split('/'))), [location.pathname]);
 
+  const renderIcon = title === 'Vitals & Biometrics' ? <ActivityIcon className={styling.icons} /> : null;
+
   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={styling.menu}>
+          {renderIcon}
+          <span>{t(title)}</span>
+        </span>
       </ConfigurableLink>
     </div>
   );

diff --git a/packages/esm-patient-common-lib/src/dashboards/dashboardextension.scss b/packages/esm-patient-common-lib/src/dashboards/dashboardextension.scss
@@ -0,0 +1,8 @@
+.menu {
+  display: flex;
+  align-items: center;
+}
+
+.icons {
+  margin-right: 0.5rem;
+}