feat(breadcrumb): add a breadcrumb underneath the page header

fix #1770

src/HospitalRun.tsx

@@ -5,6 +5,7 @@ import { Toaster } from '@hospitalrun/components'
 import Appointments from 'scheduling/appointments/Appointments'
 import NewAppointment from 'scheduling/appointments/new/NewAppointment'
 import ViewAppointment from 'scheduling/appointments/view/ViewAppointment'
+import Breadcrumb from 'components/Breadcrumb'
 import Sidebar from './components/Sidebar'
 import Permissions from './model/Permissions'
 import Dashboard from './dashboard/Dashboard'
@@ -21,6 +22,7 @@ const HospitalRun = () => {
   return (
     <div>
       <Navbar />
+      <Breadcrumb />
       <div className="container-fluid">
         <Sidebar />
         <div className="row">

src/__tests__/components/Breadcrumb.test.tsx

@@ -0,0 +1,33 @@
+import '../../__mocks__/matchMediaMock'
+import React from 'react'
+import { mount } from 'enzyme'
+import { createMemoryHistory } from 'history'
+import { Router } from 'react-router'
+import Breadcrumb from 'components/Breadcrumb'
+import {
+  Breadcrumb as HrBreadcrumb,
+  BreadcrumbItem as HrBreadcrumbItem,
+} from '@hospitalrun/components'
+
+describe('Breadcrumb', () => {
+  let history = createMemoryHistory()
+  const setup = (location: string) => {
+    history = createMemoryHistory()
+    history.push(location)
+    return mount(
+      <Router history={history}>
+        <Breadcrumb />
+      </Router>,
+    )
+  }
+
+  it('should render the breadcrumb items', () => {
+    const wrapper = setup('/patients')
+    const breadcrumbItem = wrapper.find(HrBreadcrumbItem)
+
+    expect(wrapper.find(HrBreadcrumb)).toHaveLength(1)
+    expect(
+      breadcrumbItem.matchesElement(<HrBreadcrumbItem active>patients</HrBreadcrumbItem>),
+    ).toBeTruthy()
+  })
+})

src/components/Breadcrumb.tsx

@@ -0,0 +1,46 @@
+import React from 'react'
+import { useLocation, useHistory } from 'react-router'
+import {
+  Breadcrumb as HrBreadcrumb,
+  BreadcrumbItem as HrBreadcrumbItem,
+} from '@hospitalrun/components'
+
+interface Item {
+  name: string
+  url: string
+}
+
+function getItems(pathname: string): Item[] {
+  if (!pathname || pathname === '/') {
+    return [{ name: 'dashboard', url: '/' }]
+  }
+
+  return pathname
+    .substring(1)
+    .split('/')
+    .map((name) => ({ name, url: '/' }))
+}
+
+const Breadcrumb = () => {
+  const { pathname } = useLocation()
+  const history = useHistory()
+  const items = getItems(pathname)
+  const lastIndex = items.length - 1
+
+  return (
+    <HrBreadcrumb>
+      {items.map((item, index) => {
+        const isLast = index === lastIndex
+        const onClick = !isLast ? () => history.push(item.url) : undefined
+
+        return (
+          <HrBreadcrumbItem key={item.name} active={isLast} onClick={onClick}>
+            {item.name}
+          </HrBreadcrumbItem>
+        )
+      })}
+    </HrBreadcrumb>
+  )
+}
+
+export default Breadcrumb

src/index.css

@@ -24,7 +24,7 @@ code {
   bottom: 0;
   left: 0;
   z-index: 0; /* Behind the navbar */
-  padding: 48px 0 0; /* Height of navbar */
+  padding: 75px 0 0; /* Height of navbar */
   box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
 }
 
@@ -88,3 +88,15 @@ code {
   border-color: transparent;
   box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);
 }
+
+.breadcrumb {
+	z-index: 1;
+	position: relative;
+	padding: .2rem 1rem;
+	background-color: white;
+	border-bottom: .1rem solid lightgray;
+}
+
+.breadcrumb-item > span, .breadcrumb-item > a {
+	text-transform: capitalize;
+}