[MergeDups] Add ? icon in sidebar linking to User Guide (#2969)

src/components/AppBar/UserGuideButton.tsx

@@ -15,7 +15,7 @@ export default function UserGuideButton(): ReactElement {
       <Button
         color="inherit"
         id="app-bar-guide"
-        onClick={openUserGuide}
+        onClick={() => openUserGuide()}
         style={{
           background: themeColors.lightShade,
           margin: 5,

src/components/InvalidLink/index.tsx

@@ -26,7 +26,7 @@ export default function InvalidLink(props: InvalidLinkProps): ReactElement {
           {/* User Guide, Sign Up, and Log In buttons */}
           <Grid container justifyContent="flex-end" spacing={2}>
             <Grid item xs={4} sm={6}>
-              <Button id={`${idAffix}-guide`} onClick={openUserGuide}>
+              <Button id={`${idAffix}-guide`} onClick={() => openUserGuide()}>
                 <Help />
               </Button>
             </Grid>

src/components/Login/Login.tsx

@@ -161,7 +161,10 @@ export default function Login(): ReactElement {
             {/* User Guide, Sign Up, and Log In buttons */}
             <Grid container justifyContent="space-between">
               <Grid item xs={1}>
-                <Button id={LoginId.ButtonUserGuide} onClick={openUserGuide}>
+                <Button
+                  id={LoginId.ButtonUserGuide}
+                  onClick={() => openUserGuide()}
+                >
                   <Help />
                 </Button>
               </Grid>

src/goals/MergeDuplicates/MergeDupsStep/MergeDragDrop/SidebarDrop.tsx

@@ -1,5 +1,5 @@
-import { ArrowForwardIos } from "@mui/icons-material";
-import { IconButton, Typography } from "@mui/material";
+import { ArrowForwardIos, HelpOutline } from "@mui/icons-material";
+import { Grid, IconButton, Typography } from "@mui/material";
 import { ReactElement } from "react";
 import { Droppable } from "react-beautiful-dnd";
 
@@ -8,6 +8,7 @@ import { MergeTreeSense } from "goals/MergeDuplicates/MergeDupsTreeTypes";
 import { setSidebar } from "goals/MergeDuplicates/Redux/MergeDupsActions";
 import { StoreState } from "types";
 import { useAppDispatch, useAppSelector } from "types/hooks";
+import { openUserGuide } from "utilities/pathUtilities";
 
 export default function SidebarDrop(): ReactElement {
   const dispatch = useAppDispatch();
@@ -30,13 +31,20 @@ export default function SidebarDrop(): ReactElement {
           {...providedDroppable.droppableProps}
           style={{ backgroundColor: "lightblue", height: "100%", padding: 20 }}
         >
-          <IconButton
-            onClick={() => dispatch(setSidebar())}
-            id="sidebar-close"
-            size="large"
-          >
-            <ArrowForwardIos />
-          </IconButton>
+          <Grid container justifyContent="space-between">
+            <IconButton
+              id="sidebar-close"
+              onClick={() => dispatch(setSidebar())}
+            >
+              <ArrowForwardIos />
+            </IconButton>
+            <IconButton
+              id="sidebar-help"
+              onClick={() => openUserGuide("goals.html#merge-a-sense")}
+            >
+              <HelpOutline />
+            </IconButton>
+          </Grid>
           <Typography variant="h5">{vernacular}</Typography>
           {sidebar.mergeSenses.map((ms: MergeTreeSense, i: number) => (
             <SidebarDragSense key={ms.sense.guid} index={i} mergeSense={ms} />

src/utilities/pathUtilities.ts

@@ -22,10 +22,10 @@ function getWindowOrigin(): string {
 
 /** Open the user guide in a new tab.
  * Leads to a 404 in development.
- */
-export function openUserGuide(): void {
+ * Optional `page` could be, e.g., "account.html#log-in". */
+export function openUserGuide(page = ""): void {
   const origin = getWindowOrigin();
-  window.open(`${origin}/docs/`);
+  window.open(`${origin}/docs/${page}`);
 }
 
 /**