nav: add HelpMenu

src/components/Table/BreadcrumbsSubTable.tsx

@@ -28,7 +28,7 @@ export default function BreadcrumbsSubTable({
   const splitSubTableId = subTableSettings.id.split("/");
 
   return (
-    <Stack direction="row" alignItems="center" spacing={1}>
+    <Stack direction="row" alignItems="center" spacing={1.5}>
       <Breadcrumbs
         sx={{
           typography: "button",
@@ -84,7 +84,7 @@ export default function BreadcrumbsSubTable({
               : "Table is read-only"
           }
         >
-          <ReadOnlyIcon fontSize="small" sx={{ ml: 0.5 }} />
+          <ReadOnlyIcon fontSize="small" sx={{ ml: 0.5 }} color="action" />
         </Tooltip>
       )}
     </Stack>

src/components/Table/BreadcrumbsTableRoot.tsx

@@ -41,7 +41,7 @@ export default function BreadcrumbsTableRoot(props: StackProps) {
   if (!tableSettings) return null;
 
   return (
-    <Stack direction="row" alignItems="center" spacing={1} {...props}>
+    <Stack direction="row" alignItems="center" spacing={1.5} {...props}>
       <Breadcrumbs
         aria-label="Table breadcrumbs"
         sx={{
@@ -80,7 +80,7 @@ export default function BreadcrumbsTableRoot(props: StackProps) {
               : "Table is read-only"
           }
         >
-          <ReadOnlyIcon fontSize="small" sx={{ ml: 0.5 }} />
+          <ReadOnlyIcon fontSize="small" sx={{ ml: 0.5 }} color="action" />
         </Tooltip>
       )}
 

src/constants/routes.tsx

@@ -62,6 +62,7 @@ export const ROUTE_TITLES = {
       <BreadcrumbsTableRoot sx={{ ml: open && pinned ? -48 / 8 : 2 }} />
     ),
     titleTransitionProps: { style: { transformOrigin: "0 50%" } },
+    leftAligned: true,
   },
 
   [ROUTES.settings]: "Settings",
@@ -79,5 +80,6 @@ export const ROUTE_TITLES = {
       title: string;
       titleComponent: (open: boolean, pinned: boolean) => React.ReactNode;
       titleTransitionProps?: Partial<GrowProps>;
+      leftAligned?: boolean;
     }
 >;

src/layouts/Navigation/HelpMenu.tsx

@@ -0,0 +1,120 @@
+import { useState, useRef } from "react";
+
+import {
+  IconButton,
+  IconButtonProps,
+  Menu,
+  MenuItem,
+  ListItemIcon,
+  ListItemSecondaryAction,
+  Divider,
+  Grow,
+} from "@mui/material";
+import HelpIcon from "@mui/icons-material/HelpOutline";
+import DocsIcon from "@mui/icons-material/DescriptionOutlined";
+import { Discord as DiscordIcon } from "@src/assets/icons";
+import GitHubIcon from "@mui/icons-material/GitHub";
+import TwitterIcon from "@mui/icons-material/Twitter";
+
+import { EXTERNAL_LINKS } from "@src/constants/externalLinks";
+import InlineOpenInNewIcon from "@src/components/InlineOpenInNewIcon";
+import { analytics } from "analytics";
+
+export default function UserMenu(props: IconButtonProps) {
+  const anchorEl = useRef<HTMLButtonElement>(null);
+  const [open, setOpen] = useState(false);
+
+  const externalLinkIcon = (
+    <ListItemSecondaryAction sx={{ right: 10, color: "text.disabled" }}>
+      <InlineOpenInNewIcon />
+    </ListItemSecondaryAction>
+  );
+
+  return (
+    <>
+      <Grow in>
+        <IconButton
+          aria-label="Open help menu"
+          aria-controls="help-menu"
+          aria-haspopup="true"
+          size="large"
+          {...props}
+          ref={anchorEl}
+          onClick={() => {
+            setOpen(true);
+            analytics.logEvent("open_help_menu");
+          }}
+          sx={{ ml: 1.5 }}
+        >
+          <HelpIcon />
+        </IconButton>
+      </Grow>
+
+      <Menu
+        anchorEl={anchorEl.current}
+        id="help-menu"
+        anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
+        transformOrigin={{ vertical: "top", horizontal: "right" }}
+        open={open}
+        onClose={() => setOpen(false)}
+        sx={{ "& .MuiPaper-root": { minWidth: 160 } }}
+      >
+        <MenuItem
+          component="a"
+          href={EXTERNAL_LINKS.docs}
+          target="_blank"
+          rel="noopener noreferrer"
+          onClick={() => setOpen(false)}
+        >
+          <ListItemIcon>
+            <DocsIcon />
+          </ListItemIcon>
+          Docs
+          {externalLinkIcon}
+        </MenuItem>
+
+        <Divider variant="middle" sx={{ mt: 0.5, mb: 0.5 }} />
+
+        <MenuItem
+          component="a"
+          href={EXTERNAL_LINKS.discord}
+          target="_blank"
+          rel="noopener noreferrer"
+          onClick={() => setOpen(false)}
+        >
+          <ListItemIcon>
+            <DiscordIcon />
+          </ListItemIcon>
+          Discord
+          {externalLinkIcon}
+        </MenuItem>
+        <MenuItem
+          component="a"
+          href={EXTERNAL_LINKS.gitHub}
+          target="_blank"
+          rel="noopener noreferrer"
+          onClick={() => setOpen(false)}
+        >
+          <ListItemIcon>
+            <GitHubIcon />
+          </ListItemIcon>
+          GitHub
+          {externalLinkIcon}
+        </MenuItem>
+        <MenuItem
+          component="a"
+          href={EXTERNAL_LINKS.twitter}
+          target="_blank"
+          rel="noopener noreferrer"
+          onClick={() => setOpen(false)}
+        >
+          <ListItemIcon>
+            <TwitterIcon />
+          </ListItemIcon>
+          Twitter
+          {externalLinkIcon}
+        </MenuItem>
+      </Menu>
+    </>
+  );
+}

src/layouts/Navigation/Navigation.tsx

@@ -17,6 +17,7 @@ import {
 import MenuIcon from "@mui/icons-material/Menu";
 
 import NavDrawer, { NAV_DRAWER_WIDTH } from "./NavDrawer";
+import HelpMenu from "./HelpMenu";
 import UserMenu from "./UserMenu";
 import ErrorFallback, {
   IErrorFallbackProps,
@@ -157,6 +158,10 @@ export default function Navigation({ children }: React.PropsWithChildren<{}>) {
                 overflowX: "auto",
                 userSelect: "none",
                 pl: open && canPin && pinned ? 48 / 8 : 0,
+                pr: 1,
+                ml: (routeTitle as any)?.leftAligned
+                  ? 0
+                  : { xs: 0, sm: 1.5 + 6 + 1 },
               }}
             >
               {typeof routeTitle !== "string" ? (
@@ -166,7 +171,10 @@ export default function Navigation({ children }: React.PropsWithChildren<{}>) {
                   variant="h6"
                   component="h1"
                   textAlign="center"
-                  sx={{ typography: { sm: "h5" } }}
+                  sx={{
+                    typography: { sm: "h5" },
+                    textAlign: { xs: "left", sm: "center" },
+                  }}
                 >
                   {title}
                 </Typography>
@@ -174,6 +182,7 @@ export default function Navigation({ children }: React.PropsWithChildren<{}>) {
             </Box>
           </Grow>
 
+          <HelpMenu />
           <UserMenu />
         </Toolbar>
       </AppBar>