bodyshop/client/src/landing/home/LandingNavigator.jsx

import React, { useState } from "react";
import TweenOne from "rc-tween-one";
import { Anchor, Menu } from "antd";
import { getChildrenToRender } from "./utils";
import ImexOnlineLogoLight from "../../assets/ImEX Online Logo.png";
import { Link } from "react-router-dom";
import { useTranslation } from "react-i18next";
const { Item, SubMenu } = Menu;

export default function LandingNavigator({ dataSource, isMobile, ...props }) {
  const [state, setState] = useState({ phoneOpen: undefined });
  const { t } = useTranslation();
  const { phoneOpen } = state;

  const phoneClick = () => {
    const phoneOpen = !state.phoneOpen;
    setState({
      phoneOpen,
    });
  };

  const moment = phoneOpen === undefined ? 300 : null;
  return (
    <TweenOne
      component="header"
      animation={{ opacity: 0, type: "from" }}
      className="header0 home-page-wrapper"
      //   {...props}
    >
      <div
        //{...dataSource.page}
        className={`home-page ${dataSource.page.className}${
          phoneOpen ? " open" : ""
        }`}
      >
        <TweenOne
          animation={{ x: -30, type: "from", ease: "easeOutQuad" }}
          className="header0-logo"
          // {...dataSource.logo}
        >
          <img width="100%" src={ImexOnlineLogoLight} alt="img" />
        </TweenOne>
        {isMobile && (
          //Unknown what this menu does.
          <div
            {...dataSource.mobileMenu}
            onClick={() => {
              phoneClick();
            }}
          >
            <em />
            <em />
            <em />
          </div>
        )}
        <TweenOne
          // {...dataSource.Menu}
          className="header0-menu"
          animation={
            isMobile
              ? {
                  height: 0,
                  duration: 300,
                  onComplete: (e) => {
                    if (state.phoneOpen) {
                      e.target.style.height = "auto";
                    }
                  },
                  ease: "easeInOutQuad",
                }
              : null
          }
          moment={moment}
          reverse={!!phoneOpen}
        >
          <Menu
            mode={isMobile ? "inline" : "horizontal"}
            defaultSelectedKeys={["sub0"]}
            theme="dark"
          >
            <Item className="header0-item">
              <Link to={{ hash: "#features" }} className={`header0-item-block`}>
                {t("landing.labels.features")}
              </Link>
            </Item>
            <Item className="header0-item">
              <Link to={{ hash: "#pricing" }} className={`header0-item-block`}>
                {t("landing.labels.pricing")}
              </Link>
            </Item>
            <Item className="header0-item">
              <Link to={`/manage`} className={`header0-item-block`}>
                {t("landing.labels.managemyshop")}
              </Link>
            </Item>
          </Menu>
        </TweenOne>
      </div>
    </TweenOne>
  );
}

//  <SubMenu
//     key={item.name}
//     {...itemProps}
//     title={
//       <div {...a} className={`header0-item-block ${a.className}`.trim()}>
//         {a.children.map(getChildrenToRender)}
//       </div>
//     }
//     popupClassName="header0-item-child"
//   >
//     {subItem.map(($item, ii) => {
//       const { children: childItem } = $item;
//       const child = childItem.href ? (
//         <a {...childItem}>
//           {childItem.children.map(getChildrenToRender)}
//         </a>
//       ) : (
//         <div {...childItem}>
//           {childItem.children.map(getChildrenToRender)}
//         </div>
//       );
//       return (
//         <Item key={$item.name || ii.toString()} {...$item}>
//           {child}
//         </Item>
//       );
//     })}
//   </SubMenu>
//  subItem: [
//         {
//           name: "sub0",
//           className: "item-sub",
//           children: {
//             className: "item-sub-item",
//             children: [
//               {
//                 name: "image0",
//                 className: "item-image",
//                 children:
//                   "https://gw.alipayobjects.com/zos/rmsportal/ruHbkzzMKShUpDYMEmHM.svg",
//               },
//               {
//                 name: "title",
//                 className: "item-title",
//                 children: "Ant Design",
//               },
//               {
//                 name: "content",
//                 className: "item-content",
//                 children: "企业级 UI 设计体系",
//               },
//             ],
//           },
//         },
//         {
//           name: "sub1",
//           className: "item-sub",
//           children: {
//             className: "item-sub-item",
//             children: [
//               {
//                 name: "image0",
//                 className: "item-image",
//                 children:
//                   "https://gw.alipayobjects.com/zos/rmsportal/ruHbkzzMKShUpDYMEmHM.svg",
//               },
//               {
//                 name: "title",
//                 className: "item-title",
//                 children: "Ant Design",
//               },
//               {
//                 name: "content",
//                 className: "item-content",
//                 children: "企业级 UI 设计体系",
//               },
//             ],
//           },
//         },
//       ],