update: create a Help menu

webapp/app.ironcalc.com/frontend/src/components/FileBar.tsx

@@ -3,6 +3,7 @@ import type { Model } from "@ironcalc/workbook";
 import { IronCalcIcon, IronCalcLogo } from "@ironcalc/workbook";
 import { useLayoutEffect, useRef, useState } from "react";
 import { FileMenu } from "./FileMenu";
+import { HelpMenu } from "./HelpMenu";
 import { ShareButton } from "./ShareButton";
 import ShareWorkbookDialog from "./ShareWorkbookDialog";
 import { WorkbookTitle } from "./WorkbookTitle";
@@ -61,11 +62,7 @@ export function FileBar(properties: {
         }}
         onDelete={properties.onDelete}
       />
-      <HelpButton
+      <HelpMenu />
-        onClick={() => window.open("https://docs.ironcalc.com", "_blank")}
-      >
-        Help
-      </HelpButton>
       <WorkbookTitleWrapper>
         <WorkbookTitle
           name={properties.model.getName()}

webapp/app.ironcalc.com/frontend/src/components/HelpMenu.tsx

@@ -0,0 +1,123 @@
+import styled from "@emotion/styled";
+import { Menu, MenuItem } from "@mui/material";
+import { BookOpen, Keyboard } from "lucide-react";
+import { useRef, useState } from "react";
+
+export function HelpMenu() {
+  const [isMenuOpen, setMenuOpen] = useState(false);
+  const anchorElement = useRef<HTMLDivElement>(null);
+
+  const handleClick = () => {
+    setMenuOpen(true);
+  };
+
+  const handleClose = () => {
+    setMenuOpen(false);
+  };
+
+  return (
+    <div>
+      <HelpButton
+        ref={anchorElement}
+        id="help-button"
+        aria-controls={isMenuOpen ? "help-menu" : undefined}
+        onClick={handleClick}
+        $isActive={isMenuOpen}
+      >
+        Help
+      </HelpButton>
+      <Menu
+        id="help-menu"
+        anchorEl={anchorElement.current}
+        open={isMenuOpen}
+        onClose={handleClose}
+        autoFocus={false}
+        disableRestoreFocus={true}
+        sx={{
+          "& .MuiPaper-root": {
+            borderRadius: "8px",
+            padding: "4px 0px",
+            transform: "translate(-4px, 4px)",
+          },
+          "& .MuiList-root": { padding: "0" },
+          transform: "translate(-4px, 4px)",
+        }}
+        slotProps={{
+          list: {
+            "aria-labelledby": "help-button",
+            tabIndex: -1,
+          },
+        }}
+      >
+        <MenuItemWrapper
+          onClick={() => {
+            handleClose();
+            window.open("https://docs.ironcalc.com", "_blank");
+          }}
+        >
+          <StyledIcon>
+            <BookOpen />
+          </StyledIcon>
+          <MenuItemText>Documentation</MenuItemText>
+        </MenuItemWrapper>
+        <MenuItemWrapper
+          onClick={() => {
+            handleClose();
+            window.open(
+              "https://docs.ironcalc.com/features/keyboard-shortcuts.html",
+              "_blank",
+            );
+          }}
+        >
+          <StyledIcon>
+            <Keyboard />
+          </StyledIcon>
+          <MenuItemText>Keyboard Shortcuts</MenuItemText>
+        </MenuItemWrapper>
+      </Menu>
+    </div>
+  );
+}
+
+const HelpButton = styled.div<{ $isActive?: boolean }>`
+  display: flex;
+  align-items: center;
+  font-size: 12px;
+  font-family: Inter;
+  padding: 8px;
+  border-radius: 4px;
+  cursor: pointer;
+  background-color: ${(props) => (props.$isActive ? "#e6e6e6" : "transparent")};
+  &:hover {
+    background-color: #f2f2f2;
+  }
+`;
+
+const MenuItemWrapper = styled(MenuItem)`
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  font-size: 14px;
+  width: calc(100% - 8px);
+  min-width: 172px;
+  margin: 0px 4px;
+  border-radius: 4px;
+  padding: 8px;
+  height: 32px;
+`;
+
+const StyledIcon = styled.div`
+  display: flex;
+  align-items: center;
+  svg {
+    width: 16px;
+    height: 100%;
+    color: #757575;
+    padding-right: 10px;
+  }
+`;
+
+const MenuItemText = styled.div`
+  color: #000;
+  font-size: 12px;
+`;