Header Navigation

import { HeaderNavigation } from "@momo-webplatform/mobase";

 <HeaderNavigation serviceInfo={serviceInfo} dataMenu={mainNav} navigationRight={<SearchHeader />}  hasDownloadApp={false}/>

  const mainNav = [
    {
      id: 1,
      title: "Menu 1",
      hasDropdown: true,
      dropDownCompact: true,
      subMenu: [
        {
          id: 1,
          title: "Dịch vụ 1",
          icon: "https://homepage.momocdn.net/styles/desktop/images/tienich/icon1.svg",
          url: "/",
          description: "Mô tả chi tiết dịch vụ 1",
          newTab: false,
        },
        {
          id: 2,
          title: "Dịch vụ 2",
          icon: "https://homepage.momocdn.net/styles/desktop/images/tienich/icon3.svg",
          url: "/",
          description: "Mô tả chi tiết dịch vụ 2",
          newTab: false,
        },
        ...
      ],
    },
    {
      id: 2,
      title: "Menu 5",
      hasDropdown: false,
      url: "/demo",
      newTab: false,
    },
    ...
  ];
 
  const serviceInfo = {
    logo: "https://homepage.momocdn.net/fileuploads/svg/momo-file-221117104714.svg",
    name: " Tên <br /> Dịch vụ",
    url: "/demo",
  };
 
  const SearchHeader = () => {
    return (
      <div className=" w-48">
        <form className="relative">
          <div className="relative ">
            <input
              type="text"
              placeholder="Bạn tìm gì ..."
              className="block h-8 text-sm w-full items-center justify-center rounded border border-gray-300 bg-white px-3 py-1"
              defaultValue=""
            />
            <button
              type="submit"
              className="absolute right-2 top-2 border-none opacity-50 outline-none"
              aria-label="Search"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                className="h-4 w-4 "
                fill="none"
                viewBox="0 0 24 24"
                stroke="currentColor"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={2}
                  d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
                />
              </svg>
            </button>
          </div>
        </form>
      </div>
 
    );
  };