diff --git a/src/hooks/useMenuNavigationHelper.ts b/src/hooks/useMenuNavigationHelper.ts new file mode 100644 index 00000000..a32fd00d --- /dev/null +++ b/src/hooks/useMenuNavigationHelper.ts @@ -0,0 +1,23 @@ +import { NetworkConnection } from "@contexts/Environment"; +import { useNetwork } from "@contexts/NetworkContext"; + +export interface MenuItem { + label: string; + pathname: string; + testId: string; + childPaths: string[]; + imagePath: string; +} + +// To hide /faucet navigation menu item if not in testnet +export default function useMenuNavigationHelper({ + menu, +}: { + menu: MenuItem[]; +}) { + const { connection } = useNetwork(); + + return connection !== NetworkConnection.TestNet + ? menu.filter((item) => item.label !== "Faucet") + : menu; +} diff --git a/src/layouts/components/Header.tsx b/src/layouts/components/Header.tsx index f174f4f6..70602b0f 100644 --- a/src/layouts/components/Header.tsx +++ b/src/layouts/components/Header.tsx @@ -3,15 +3,18 @@ import Link from "@components/commons/Link"; import { useRouter } from "next/router"; import React, { useEffect, useState } from "react"; import Container from "@components/commons/Container"; -import { FiXCircle, FiMenu } from "react-icons/fi"; +import { FiMenu, FiXCircle } from "react-icons/fi"; import Image from "next/image"; import { getTopLevelRoute } from "shared/urlHelper"; +import useMenuNavigationHelper, { + MenuItem, +} from "@hooks/useMenuNavigationHelper"; import { HeaderNetworkMenu, HeaderNetworkMenuMobile, } from "./HeaderNetworkMenu"; -const MenuItems = [ +export const MenuItems: MenuItem[] = [ { label: "Blocks", pathname: "/blocks", @@ -44,7 +47,7 @@ const MenuItems = [ label: "Faucet", pathname: "/faucet", testId: "Desktop.HeaderLink.Faucet", - childPaths: ["/token"], + childPaths: ["/faucet"], imagePath: "/menu/Transactions.svg", }, ]; @@ -103,9 +106,11 @@ export default function Header(): JSX.Element { } function DesktopNavbar({ currentPath }: { currentPath: string }): JSX.Element { + const filteredMenuItems = useMenuNavigationHelper({ menu: MenuItems }); + return (