fix(Navbar): replaced deprecated overlay prop with menu in Dropdown component

Author: codeAntu

src/components/Navbar.tsx

@@ -1,15 +1,16 @@
-import { useState } from "react";
-import { Menu, Dropdown, Button, Image, Grid } from "antd";
-import { useSpring, animated } from "react-spring";
-import { useLocation, Link } from "react-router-dom";
 import {
+  BookOutlined,
+  CaretDownFilled,
   GithubOutlined,
+  InfoOutlined,
   QuestionOutlined,
   UserOutlined,
-  InfoOutlined,
-  BookOutlined,
-  CaretDownFilled,
 } from "@ant-design/icons";
+import type { MenuProps } from "antd";
+import { Button, Dropdown, Grid, Image } from "antd";
+import { useState } from "react";
+import { Link, useLocation } from "react-router-dom";
+import { animated, useSpring } from "react-spring";
 import ToggleDarkMode from "./ToggleDarkMode";
 
 const { useBreakpoint } = Grid;
@@ -31,50 +32,70 @@ function Navbar({ scrollToFooter }: { scrollToFooter: any }) {
     config: { duration: 1000 },
   });
 
-  const helpMenu = (
-    <Menu>
-      <Menu.ItemGroup title="Info">
-        <Menu.Item key="about">
-          <a
-            href="https://github.com/accordproject/template-playground/blob/main/README.md"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <QuestionOutlined /> About
-          </a>
-        </Menu.Item>
-        <Menu.Item key="community">
-          <a
-            href="https://discord.com/invite/Zm99SKhhtA"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <UserOutlined /> Community
-          </a>
-        </Menu.Item>
-        <Menu.Item key="issues">
-          <a
-            href="https://github.com/accordproject/template-playground/issues"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <InfoOutlined /> Issues
-          </a>
-        </Menu.Item>
-      </Menu.ItemGroup>
-      <Menu.ItemGroup title="Documentation">
-        <Menu.Item key="documentation">
-          <a
-            href="https://github.com/accordproject/template-engine/blob/main/README.md"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <BookOutlined /> Documentation
-          </a>
-        </Menu.Item>
-      </Menu.ItemGroup>
-    </Menu>
-  );
+  const helpMenu: MenuProps["items"] = [
+    {
+      key: "info",
+      type: "group",
+      label: "Info",
+      children: [
+        {
+          key: "about",
+          label: (
+            <a
+              href="https://github.com/accordproject/template-playground/blob/main/README.md"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <QuestionOutlined /> About
+            </a>
+          ),
+        },
+        {
+          key: "community",
+          label: (
+            <a
+              href="https://discord.com/invite/Zm99SKhhtA"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <UserOutlined /> Community
+            </a>
+          ),
+        },
+        {
+          key: "issues",
+          label: (
+            <a
+              href="https://github.com/accordproject/template-playground/issues"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <InfoOutlined /> Issues
+            </a>
+          ),
+        },
+      ],
+    },
+    {
+      key: "documentation",
+      type: "group",
+      label: "Documentation",
+      children: [
+        {
+          key: "documentation",
+          label: (
+            <a
+              href="https://github.com/accordproject/template-engine/blob/main/README.md"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <BookOutlined /> Documentation
+            </a>
+          ),
+        },
+      ],
+    },
+  ];
 
   const menuItemStyle = (key: string, isLast: boolean) => ({
     display: "flex",
@@ -148,7 +169,7 @@ function Navbar({ scrollToFooter }: { scrollToFooter: any }) {
             onMouseEnter={() => setHovered("help")}
             onMouseLeave={() => setHovered(null)}
           >
-            <Dropdown overlay={helpMenu} trigger={["click"]}>
+            <Dropdown menu={{ items: helpMenu }} trigger={["click"]}>
               <Button
                 style={{
                   background: "transparent",
@@ -254,4 +275,4 @@ function Navbar({ scrollToFooter }: { scrollToFooter: any }) {
   );
 }
 
-export default Navbar;
+export default Navbar;