Add NavLinkMenu component (#592)

explorer/app/components/Layout/components/Header/components/NavLinkMenu/navLinkMenu.stories.tsx

@@ -0,0 +1,74 @@
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { CustomIcon } from "app/components/common/CustomIcon/customIcon";
+import React from "react";
+import { NavLinkMenu } from "./navLinkMenu";
+
+export default {
+  argTypes: {
+    menuItems: { control: "array" },
+    menuLabel: { control: "text" },
+  },
+  component: NavLinkMenu,
+  title: "Components/Navigation/NavLinkMenu",
+} as ComponentMeta<typeof NavLinkMenu>;
+
+const Template: ComponentStory<typeof NavLinkMenu> = (args) => (
+  <NavLinkMenu {...args} />
+);
+
+export const MoreMenu = Template.bind({});
+MoreMenu.args = {
+  menuItems: [
+    {
+      label: "News",
+      url: "/news",
+    },
+    {
+      label: "Events",
+      url: "/events",
+    },
+    {
+      label: "Team",
+      url: "/team",
+    },
+    {
+      label: "FAQ",
+      url: "/faq",
+    },
+  ],
+  menuLabel: "More",
+};
+
+export const FollowUsMenu = Template.bind({});
+FollowUsMenu.args = {
+  menuItems: [
+    {
+      icon: (
+        <CustomIcon fontSize="small" color="inkLight" iconName="discourse" />
+      ),
+      label: "Discourse",
+      url: "https://help.anvilproject.org/",
+    },
+    {
+      icon: <CustomIcon fontSize="small" color="inkLight" iconName="twitter" />,
+      label: "Twitter",
+      url: "https://twitter.com/useAnVIL",
+    },
+    {
+      icon: <CustomIcon fontSize="small" color="inkLight" iconName="slack" />,
+      label: "Slack",
+      url: "https://join.slack.com/t/anvil-community/shared_invite/zt-hsyfam1w-LXlCv~3vNLSfDj~qNd5uBg",
+    },
+    {
+      icon: <CustomIcon fontSize="small" color="inkLight" iconName="youtube" />,
+      label: "YouTube",
+      url: "https://www.youtube.com/channel/UCBbHCj7kUogAMFyBAzzzfUw",
+    },
+    {
+      icon: <CustomIcon fontSize="small" color="inkLight" iconName="github" />,
+      label: "GitHub",
+      url: "https://github.com/anvilproject",
+    },
+  ],
+  menuLabel: "Follow Us",
+};

explorer/app/components/Layout/components/Header/components/NavLinkMenu/navLinkMenu.styles.ts

@@ -0,0 +1,14 @@
+import styled from "@emotion/styled";
+import { Menu } from "@mui/material";
+
+export const NavLinkMenu = styled(Menu)`
+  .MuiPaper-menu {
+    margin: 4px 0;
+    min-width: 144px;
+    border-color: ${({ theme }) => theme.palette.smoke.main};
+  }
+
+  & .MuiListItemIcon-root {
+    min-width: 24px;
+  }
+`;

explorer/app/components/Layout/components/Header/components/NavLinkMenu/navLinkMenu.tsx

@@ -0,0 +1,61 @@
+import { ListItemIcon, ListItemText, MenuItem } from "@mui/material";
+import { useRouter } from "next/router";
+import React, { MouseEvent, ReactNode, useState } from "react";
+import { NavLinkMenu as Menu } from "./navLinkMenu.styles";
+
+export interface MenuItem {
+  icon?: ReactNode;
+  label: string;
+  url: string;
+}
+
+interface Props {
+  menuItems: MenuItem[];
+  menuLabel: string;
+}
+
+export const NavLinkMenu = ({ menuItems, menuLabel }: Props): JSX.Element => {
+  const router = useRouter();
+  const [anchorEl, setAnchorEl] = useState<null | HTMLButtonElement>(null);
+  const open = Boolean(anchorEl);
+
+  const onOpenMenu = (event: MouseEvent<HTMLButtonElement>): void => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const onCloseMenu = (): void => {
+    setAnchorEl(null);
+  };
+
+  return (
+    <>
+      <button onClick={onOpenMenu}>{menuLabel}</button>
+      <Menu
+        anchorEl={anchorEl}
+        anchorOrigin={{ horizontal: "left", vertical: "bottom" }}
+        onClose={onCloseMenu}
+        open={open}
+        PaperProps={{ variant: "menu" }}
+        transformOrigin={{
+          horizontal: "left",
+          vertical: "top",
+        }}
+      >
+        {menuItems.map(({ icon, label, url }) => (
+          <MenuItem
+            key={label}
+            onClick={(): void => {
+              setAnchorEl(null);
+              router.push(url);
+            }}
+          >
+            {icon && <ListItemIcon>{icon}</ListItemIcon>}
+            <ListItemText primaryTypographyProps={{ variant: "text-body-400" }}>
+              {label}
+            </ListItemText>
+          </MenuItem>
+        ))}
+      </Menu>
+    </>
+  );
+};

explorer/app/theme/definitions.d.ts

@@ -165,6 +165,10 @@ declare module "@mui/material/Paper" {
  * SvgIcon prop options.
  */
 declare module "@mui/material/SvgIcon" {
+  interface SvgIconPropsColorOverrides {
+    inkLight: true;
+  }
+
   interface SvgIconPropsSizeOverrides {
     xsmall: true;
     xxlarge: true;

explorer/app/theme/theme.ts

@@ -688,6 +688,9 @@ export const getAppTheme = (customTheme?: ThemeOptions): Theme => {
       },
       MuiSvgIcon: {
         styleOverrides: {
+          colorInkLight: {
+            color: inkLight,
+          },
           fontSizeLarge: {
             fontSize: "32px",
           },
@@ -708,6 +711,11 @@ export const getAppTheme = (customTheme?: ThemeOptions): Theme => {
           },
         },
         variants: [
+          {
+            props: {
+              color: "inkLight",
+            },
+          },
           {
             props: {
               size: "xsmall",