Siderail and Bottom Nav

The Siderail and Bottom Nav are desktop and tablet versions of the same navigation functionality. They contain buttons that open different tabs in the Workspace. Once open, the Workspace is persistent across dashboards within the Patient Chart. Designs for these elements are on the OpenMRS Styleguide (opens in a new tab).

Adding a New Navigation Button

The Siderail and Bottom Nav contain an extension slot, action-menu-chart-items-slot. New navigation buttons may be wrapped in extensions and attached to this slot.

Continuing our example from Registering Workspaces, let's assume we have registered a workspace called gastrodynamics-form.

// routes.json
{
  "extensions": [
    {
      "name": "gastrodynamics-form-button",
      "component": "gastrodynamicsFormButton",
      "slot": "action-menu-chart-items-slot",
      "order": 4
    }
  ]
}

// index.ts
export const gastrodynamicsFormButton = getAsyncLifecycle(
  () => import('./gastrodynamics-form-button.extension'),
  options,
);

// gastrodynamics-form-button.extension.tsx
import React from "react";
import { useTranslation } from "react-i18next";
import { Tag } from "@carbon/react";
import { Intestines } from "@carbon/react/icons"; // this is not a real icon, unfortunately
import {
  useLaunchWorkspaceRequiringVisit,
  SiderailNavButton,
} from "@openmrs/esm-patient-common-lib";
 
export default function GastrodynamicsFormButton() {
  const { t } = useTranslation();
  const launchGastrodynamicsForm = useLaunchWorkspaceRequiringVisit("gastrodynamics-form");
 
  return (
    <SiderailNavButton
      name={"gastrodynamics-form-button"}
      getIcon={(props) => <Intestines {...props} />}
      label={t("gastrodynamics", "Gastrodynamics")}
      iconDescription={t("gastrodynamics", "Gastrodynamics")}
      handler={launchGastrodynamicsForm}
      type={"form"}
    />
  );
};

Siderail and Bottom Nav Behavior

The Siderail and Bottom Nav are implemented as a single component. If the screen is desktop-width, the Siderail is rendered; if it is smaller then the Bottom Nav is rendered.

Each SiderailNavButton has a type, which should correspond to the workspace that it opens. Given a SiderailNavButton, if a workspace is visible on the screen that matches its type, then that button will be highlighted as "active." If a workspace with a matching type has been opened but is not presently visible on the screen (it is minimized, or behind another workspace), then the button will show a little red warning badge, signifying that the workspace is in the "interrupted" state.