(feat) Add Help button on nav bar

src/index.ts

@@ -44,7 +44,7 @@ import {
   isTreatmentVisible,
   loadFollowupStatus,
   getBirthdateFromAge,
-  getAgeFromBirthdate
+  getAgeFromBirthdate,
 } from "./custom-expressions";
 import {
   createConditionalDashboardGroup,
@@ -233,3 +233,8 @@ export const patientList = getSyncLifecycle(PatientList, {
   featureName: "home",
   moduleName,
 });
+
+export const helpMenu = getAsyncLifecycle(
+  () => import("./views/navbar/help-button.component"),
+  options
+);

src/routes.json

@@ -153,6 +153,11 @@
       "name": "eth-patient-list",
       "slot": "eth-home-dashboard-slot",
       "component": "patientList"
+    },
+    {
+      "name": "help-menu-ext",
+      "slot": "user-panel-slot",
+      "component": "helpMenu"
     }
   ]
 }

src/views/navbar/help-button.component.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { Switcher } from "@carbon/react";
+import { Help } from "@carbon/react/icons";
+import styles from "./navbar.scss";
+
+const HelpMenu: React.FC = () => {
+  const openHelpLink = () => {
+    const currentUrl = new URL(window.location.href);
+    currentUrl.port = "81";
+    currentUrl.pathname = "/doku.php";
+    window.open(currentUrl.toString(), "_blank");
+  };
+
+  return (
+    <div className={styles.switcherContainer} onClick={openHelpLink}>
+      <Switcher aria-label="Switcher Container">
+        <Help size={20} />
+        <p>Help</p>
+      </Switcher>
+    </div>
+  );
+};
+
+export default HelpMenu;

src/views/navbar/navbar.scss

@@ -1,6 +1,62 @@
 @use "@carbon/styles/scss/spacing";
 @import "../../root.scss";
 
+.switcherContainer {
+  display: flex;
+  flex-direction: column;
+}
+.switcherContainer ul {
+  display: flex;
+  flex-direction: row;
+  width: 20rem;
+  justify-content: flex-start;
+  color: $field-01;
+  align-items: center;
+  @extend .productiveHeading01;
+  height: 3rem;
+  cursor: pointer;
+}
+
+.switcherContainer ul > svg {
+  margin: 0rem 0.75rem;
+  fill: $field-01;
+}
+
+.switcherContainer ul button {
+  @extend .productiveHeading01;
+  width: 100%;
+  background-color: var(--brand-02);
+}
+
+.switcherContainer ul button:hover {
+  color: $field-01;
+  background-color: var(--brand-01);
+}
+
+.switcherContainer ul div {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  @extend .bodyLong01;
+}
+
+.switcherContainer ul div button {
+  color: $inverse-link;
+  margin-left: 0.5rem;
+  width: 5rem;
+}
+
+.switcherContainer ul div button:hover {
+  background-color: var(--brand-01);
+  color: $inverse-link;
+}
+
+.switcherContainer hr {
+  background-color: $ui-background;
+  width: 16rem;
+  margin: 0.5rem 0rem;
+}
 .topNavActionsSlot {
     display: flex;
     align-items: center;