NavDrawer: update Help, Learning menus

src/constants/externalLinks.ts

@@ -23,6 +23,9 @@ export const EXTERNAL_LINKS = {
   rowyAppHostName: "rowy.app",
 
   dateFormat: "https://date-fns.org/v2.24.0/docs/format",
+
+  welcomeVideo:
+    "https://www.youtube.com/watch?v=rJWASZW2ivg&list=PLow2dGbF6XclrTSvW3ug1pRxbGwsIgcWJ&index=1",
 } as const;
 
 const WIKI_PATHS = {
@@ -38,6 +41,9 @@ const WIKI_PATHS = {
   howToDefaultValues: "/how-to/default-values",
   howToCustomViews: "/how-to/custom-views",
 
+  faqs: "/category/faqs",
+  faqsAccess: "/faqs/access",
+
   fieldTypesSupportedFields: "/field-types/supported-fields",
   fieldTypesDerivative: "/field-types/derivative",
   fieldTypesConnectTable: "/field-types/connect-table",

src/layouts/Navigation/NavDrawer/HelpMenu.tsx

@@ -3,16 +3,15 @@ import { useEffect } from "react";
 import {
   Menu,
   MenuProps,
-  ListSubheader,
   MenuItem,
-  ListItemIcon,
   ListItemSecondaryAction,
   Divider,
+  ListItem,
+  ListItemText,
 } from "@mui/material";
 import InlineOpenInNewIcon from "@src/components/InlineOpenInNewIcon";
-import SocialLogo from "@src/components/SocialLogo";
 
-import { EXTERNAL_LINKS } from "@src/constants/externalLinks";
+import { EXTERNAL_LINKS, WIKI_LINKS } from "@src/constants/externalLinks";
 import { logEvent, analytics } from "analytics";
 
 export default function HelpMenu({
@@ -46,28 +45,9 @@ export default function HelpMenu({
       id="help-menu"
       anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
       transformOrigin={{ vertical: "bottom", horizontal: "left" }}
-      sx={{ "& .MuiPaper-root": { mt: 1.5, py: 1 } }}
+      sx={{ "& .MuiPaper-root": { mt: 1.5 } }}
       PaperProps={{ elevation: 12 }}
     >
-      <ListSubheader
-        sx={{
-          mb: 0.5,
-          typography: "subtitle1",
-        }}
-      >
-        Get support
-      </ListSubheader>
-      <ListSubheader
-        sx={{
-          mb: 1.5,
-          maxWidth: 260,
-          typography: "body2",
-          color: "text.secondary",
-        }}
-      >
-        Reach out for help and find FAQs on GitHub Discussions
-      </ListSubheader>
-
       <MenuItem
         component="a"
         href={EXTERNAL_LINKS.gitHub + "/discussions"}
@@ -75,14 +55,20 @@ export default function HelpMenu({
         rel="noopener noreferrer"
         onClick={onClose as any}
       >
-        <ListItemIcon sx={{ mr: 1 }}>
-          <SocialLogo platform="gitHub" />
-        </ListItemIcon>
-        GitHub Discussions
+        Get support
         {externalLinkIcon}
       </MenuItem>
 
-      <Divider variant="middle" />
+      <MenuItem
+        component="a"
+        href={WIKI_LINKS.faqs}
+        target="_blank"
+        rel="noopener noreferrer"
+        onClick={onClose as any}
+      >
+        FAQs
+        {externalLinkIcon}
+      </MenuItem>
 
       <MenuItem
         component="a"
@@ -91,12 +77,18 @@ export default function HelpMenu({
         rel="noopener noreferrer"
         onClick={onClose as any}
       >
-        <ListItemIcon sx={{ mr: 1 }}>
-          <SocialLogo platform="gitHub" />
-        </ListItemIcon>
-        Feature request
+        Feature requests
         {externalLinkIcon}
       </MenuItem>
+
+      <Divider variant="middle" />
+
+      <ListItem>
+        <ListItemText
+          primary={`Rowy v${meta.version}`}
+          primaryTypographyProps={{ color: "text.disabled" }}
+        />
+      </ListItem>
     </Menu>
   );
 }

src/layouts/Navigation/NavDrawer/LearningMenu.tsx

@@ -0,0 +1,86 @@
+import { useEffect } from "react";
+import { Link } from "react-router-dom";
+
+import {
+  Menu,
+  MenuProps,
+  MenuItem,
+  ListItemSecondaryAction,
+} from "@mui/material";
+import InlineOpenInNewIcon from "@src/components/InlineOpenInNewIcon";
+import { ChevronRight as ChevronRightIcon } from "@src/assets/icons";
+
+import { EXTERNAL_LINKS, WIKI_LINKS } from "@src/constants/externalLinks";
+import { ROUTES } from "@src/constants/routes";
+import { logEvent, analytics } from "analytics";
+
+export default function LearningMenu({
+  anchorEl,
+  onClose,
+}: Pick<MenuProps, "anchorEl" | "onClose">) {
+  const open = Boolean(anchorEl);
+  useEffect(() => {
+    if (open) logEvent(analytics, "open_learning_menu");
+  }, [open]);
+
+  const externalLinkIcon = (
+    <ListItemSecondaryAction
+      sx={{
+        position: "relative",
+        transform: "none",
+        ml: "auto",
+        pl: 2,
+        color: "text.disabled",
+        right: -2,
+      }}
+    >
+      <InlineOpenInNewIcon />
+    </ListItemSecondaryAction>
+  );
+
+  return (
+    <Menu
+      anchorEl={anchorEl}
+      open={open}
+      onClose={onClose}
+      id="learning-menu"
+      anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
+      transformOrigin={{ vertical: "bottom", horizontal: "left" }}
+      sx={{ "& .MuiPaper-root": { mt: 1.5 } }}
+      PaperProps={{ elevation: 12 }}
+    >
+      <MenuItem
+        component="a"
+        href={WIKI_LINKS.howTo}
+        target="_blank"
+        rel="noopener noreferrer"
+        onClick={onClose as any}
+      >
+        How-to guides
+        {externalLinkIcon}
+      </MenuItem>
+
+      <MenuItem
+        component={Link}
+        to={ROUTES.tableTutorial}
+        onClick={onClose as any}
+      >
+        Table tutorial
+        <ListItemSecondaryAction sx={{ color: "text.disabled", height: 20 }}>
+          <ChevronRightIcon />
+        </ListItemSecondaryAction>
+      </MenuItem>
+
+      <MenuItem
+        component="a"
+        href={EXTERNAL_LINKS.welcomeVideo}
+        target="_blank"
+        rel="noopener noreferrer"
+        onClick={onClose as any}
+      >
+        Video tutorials
+        {externalLinkIcon}
+      </MenuItem>
+    </Menu>
+  );
+}

src/layouts/Navigation/NavDrawer/NavDrawer.tsx

@@ -30,6 +30,7 @@ import {
 import Logo from "@src/assets/Logo";
 import NavItem from "./NavItem";
 import GetStartedProgress from "@src/components/GetStartedChecklist/GetStartedProgress";
+import LearningMenu from "./LearningMenu";
 import CommunityMenu from "./CommunityMenu";
 import HelpMenu from "./HelpMenu";
 import { INavDrawerContentsProps } from "./NavDrawerContents";
@@ -73,6 +74,8 @@ export default function NavDrawer({
   const [getStartedCompleted, getStartedCompletionCount] =
     useGetStartedCompletion();
 
+  const [learningMenuAnchorEl, setLearningMenuAnchorEl] =
+    useState<HTMLButtonElement | null>(null);
   const [communityMenuAnchorEl, setCommunityMenuAnchorEl] =
     useState<HTMLButtonElement | null>(null);
   const [helpMenuAnchorEl, setHelpMenuAnchorEl] =
@@ -300,13 +303,27 @@ export default function NavDrawer({
                 </li>
 
                 <li>
-                  <NavItem href={WIKI_LINKS.howTo}>
+                  <NavItem
+                    onClick={(e: any) => {
+                      setLearningMenuAnchorEl(e.currentTarget);
+                      setHover("persist");
+                    }}
+                  >
                     <ListItemIcon>
                       <LearningIcon />
                     </ListItemIcon>
                     <ListItemText primary="Learning" />
-                    {externalLinkIcon}
+                    <ListItemSecondaryAction>
+                      <ChevronRightIcon />
+                    </ListItemSecondaryAction>
                   </NavItem>
+                  <LearningMenu
+                    anchorEl={learningMenuAnchorEl}
+                    onClose={() => {
+                      setLearningMenuAnchorEl(null);
+                      setHover(false);
+                    }}
+                  />
                 </li>
 
                 <li>