feat(menu): added icons to items in the hamburger menu

src/__tests__/shared/components/navbar/Navbar.test.tsx

@@ -58,10 +58,16 @@ describe('Navbar', () => {
       const hospitalRunNavbar = wrapper.find(HospitalRunNavbar)
       const hamberger = hospitalRunNavbar.find('.nav-hamberger')
       const { children } = hamberger.first().props() as any
-
-      expect(children[0].props.children).toEqual([undefined, 'dashboard.label'])
-      expect(children[1].props.children).toEqual([undefined, 'patients.newPatient'])
-      expect(children[children.length - 1].props.children).toEqual([undefined, 'settings.label'])
+      const [dashboardIcon, dashboardLabel] = children[0].props.children
+      const [newPatientIcon, newPatientLabel] = children[1].props.children
+      const [settingsIcon, settingsLabel] = children[children.length - 1].props.children
+
+      expect(dashboardIcon.props.icon).toEqual('dashboard')
+      expect(dashboardLabel).toEqual('dashboard.label')
+      expect(newPatientIcon.props.icon).toEqual('patient-add')
+      expect(newPatientLabel).toEqual('patients.newPatient')
+      expect(settingsIcon.props.icon).toEqual('setting')
+      expect(settingsLabel).toEqual('settings.label')
     })
 
     it('should not show an item if user does not have a permission', () => {
@@ -141,8 +147,10 @@ describe('Navbar', () => {
       const hospitalRunNavbar = wrapper.find(HospitalRunNavbar)
       const addNew = hospitalRunNavbar.find('.nav-add-new')
       const { children } = addNew.first().props() as any
+      const [icon, label] = children[0].props.children
 
-      expect(children[0].props.children).toEqual([undefined, 'patients.newPatient'])
+      expect(label).toEqual('patients.newPatient')
+      expect(icon.props.icon).toEqual('patient-add')
     })
 
     it('should not show a shortcut if user does not have a permission', () => {

src/shared/components/navbar/Navbar.tsx

@@ -31,6 +31,7 @@ const Navbar = () => {
       .map((page) => ({
         type: 'link',
         label: t(page.label),
+        icon: page.icon,
         onClick: () => {
           navigateTo(page.path)
         },

src/shared/components/navbar/pageMap.tsx

@@ -1,6 +1,6 @@
 import Permissions from '../../model/Permissions'
 
-type Page = { permission: Permissions | null; label: string; path: string }
+type Page = { permission: Permissions | null; label: string; path: string; icon?: string }
 
 const pageMap: {
   [key: string]: Page
@@ -9,51 +9,61 @@ const pageMap: {
     permission: null,
     label: 'dashboard.label',
     path: '/',
+    icon: 'dashboard',
   },
   newPatient: {
     permission: Permissions.WritePatients,
     label: 'patients.newPatient',
     path: '/patients/new',
+    icon: 'patient-add',
   },
   viewPatients: {
     permission: Permissions.ReadPatients,
     label: 'patients.patientsList',
     path: '/patients',
+    icon: 'incident',
   },
   newAppointment: {
     permission: Permissions.WriteAppointments,
     label: 'scheduling.appointments.new',
     path: '/appointments/new',
+    icon: 'appointment-add',
   },
   viewAppointments: {
     permission: Permissions.ReadAppointments,
     label: 'scheduling.appointments.schedule',
     path: '/appointments',
+    icon: 'incident',
   },
   newLab: {
     permission: Permissions.RequestLab,
     label: 'labs.requests.new',
     path: '/labs/new',
+    icon: 'add',
   },
   viewLabs: {
     permission: Permissions.ViewLabs,
     label: 'labs.requests.label',
     path: '/labs',
+    icon: 'incident',
   },
   newIncident: {
     permission: Permissions.ReportIncident,
     label: 'incidents.reports.new',
     path: '/incidents/new',
+    icon: 'add',
   },
   viewIncidents: {
     permission: Permissions.ViewIncidents,
     label: 'incidents.reports.label',
     path: '/incidents',
+    icon: 'incident',
   },
   settings: {
     permission: null,
     label: 'settings.label',
     path: '/settings',
+    icon: 'setting',
   },
 }