@windstream/react-shared-components 0.1.75 → 0.1.77

package/src/contentful/blocks/navigation/index.tsx

@@ -1,512 +1,567 @@
-import React, { FormEvent } from "react";
-import { DesktopLinkGroups } from "./desktop-link-groups.tsx";
-import { MobileLinkGroups } from "./mobile-link-groups.tsx";
-import { NavigationProps } from "./types";
-
-import { CallButton } from "@shared/components/call-button";
-import { Input } from "@shared/components/input";
-import { Link } from "@shared/components/link";
-import { MaterialIcon } from "@shared/components/material-icon";
-import { NextImage } from "@shared/components/next-image";
-import { Text } from "@shared/components/text";
-import { Button as ContentfulButton } from "@shared/contentful/blocks/button";
-import { cx } from "@shared/utils";
-
-export const Navigation: React.FC<NavigationProps> = props => {
-  const {
-    primaryNavigationLinks,
-    utilityNavigationLinks,
-    checkPlansJSX,
-    primaryNavigationLogo,
-    accountNavigationLinks,
-    supportNavigationLinks,
-    searchBarIcon,
-    invocaPhoneNumberLink,
-    invocaPhoneNumberDisplayText,
-    callNowCtaText,
-    displayCartIcon,
-    cartHref,
-    cartHasRetention,
-    cartIconAriaLabel = "Cart",
-    onCallClickDesktop,
-    onCallClickMobile,
-    onCartClick,
-    onSearch = () => {},
-    utilityNavActiveIndex,
-    primaryNavigationLogoWidth = 76.5,
-    primaryNavigationLogoHeight = 24,
-    hideMobileCallButton = false,
-    displayUtilityNavigation = true,
-    displaySearchBar = true,
-    displayCallNowCta = true,
-    showCallButton = true,
-    navigationBackgroundColor,
-    navigationLinkColor,
-  } = props;
-
-  const logoUrl =
-    typeof primaryNavigationLogo === "string"
-      ? primaryNavigationLogo
-      : primaryNavigationLogo?.url || "";
-
-  // Background token convention matches the legacy ResidentialNavbar:
-  // when CMS provides a token like "navy500" we map it to
-  // `bg-secondary-navy500`. Raw Tailwind classes (containing a `-`)
-  // are passed through untouched. Defaults to `bg-secondary-navy500`
-  // to preserve legacy behavior when CMS leaves the field empty.
-  const mainNavBgClass = navigationBackgroundColor
-    ? navigationBackgroundColor.includes("-") ||
-      navigationBackgroundColor.startsWith("bg-")
-      ? navigationBackgroundColor
-      : `bg-secondary-${navigationBackgroundColor}`
-    : "bg-secondary-navy500";
-
-  const hasMobileMenuItems =
-    (primaryNavigationLinks?.length ?? 0) > 0 ||
-    (supportNavigationLinks?.length ?? 0) > 0 ||
-    (accountNavigationLinks?.length ?? 0) > 0;
-
-  return (
-    <div className="component-container">
-      <nav className={`menu-container z-[1000]`}>
-        {displayUtilityNavigation ? (
-          <div className="utility-container hidden lg:block lg:border-b lg:px-2">
-            <div className="mx-auto flex max-w-120 justify-between">
-              <ul className="flex gap-5" aria-label="Utility Navigation">
-                {utilityNavigationLinks?.map((links, index) => {
-                  return (
-                    <li key={`main-menu-items-${index}`}>
-                      <ContentfulButton
-                        linkClassName={cx(
-                          "footnote flex items-center w-full h-11 text-text",
-                          // If utilityNavActiveIndex is not provided, default to making the second link active (for existing business app). If utilityNavActiveIndex is provided, use it to determine which link is active.
-                          typeof utilityNavActiveIndex !== "number"
-                            ? index === 1 && "label4"
-                            : utilityNavActiveIndex === index && "label4"
-                        )}
-                        linkVariant="unstyled"
-                        {...(Object.fromEntries(
-                          Object.entries(links).filter(([_, v]) => v !== null)
-                        ) as any)}
-                      />
-                    </li>
-                  );
-                })}
-              </ul>
-              <div className="flex items-center gap-10">
-                {displayCallNowCta ? (
-                  <CallButton
-                    className="border-none"
-                    href={invocaPhoneNumberLink}
-                    prefix={callNowCtaText}
-                    onClick={onCallClickDesktop}
-                  >
-                    <Text className="body3 text-text">
-                      {invocaPhoneNumberDisplayText}
-                    </Text>
-                  </CallButton>
-                ) : null}
-                {displayCartIcon ? (
-                  <Link
-                    href={cartHref || "#"}
-                    className="relative inline-flex cursor-pointer"
-                    aria-label={cartIconAriaLabel}
-                    onClick={onCartClick}
-                  >
-                    <MaterialIcon name="shopping_cart" />
-                    {cartHasRetention ? (
-                      <span className="absolute -right-2 -top-1 h-2.5 w-2.5 rounded-full bg-icon-brand" />
-                    ) : null}
-                  </Link>
-                ) : null}
-                {accountNavigationLinks?.map((links, index) => {
-                  return (
-                    <DesktopLinkGroups
-                      key={`my-account-${index}`}
-                      anchorName={`my-account-${index}`}
-                      link={links}
-                    />
-                  );
-                })}
-              </div>
-            </div>
-          </div>
-        ) : null}
-        <div
-          className={cx("main-nav-container", mainNavBgClass, navigationLinkColor)}
-          aria-label="Main Navigation"
-        >
-          <div className="mobile-nav-section flex h-14 items-center justify-between border border-b px-5 py-[10px] lg:hidden">
-            <div>
-              {logoUrl ? (
-                <Link href="/" className="flex">
-                  <NextImage
-                    src={logoUrl}
-                    alt="Kinetic business logo"
-                    width={primaryNavigationLogoWidth}
-                    height={primaryNavigationLogoHeight}
-                  />
-                </Link>
-              ) : null}
-            </div>
-            <div className="flex items-center gap-6">
-              {showCallButton && !hideMobileCallButton ? (
-                <CallButton
-                  href={invocaPhoneNumberLink}
-                  onClick={onCallClickMobile}
-                >
-                  <Text as="span" className="footnote">
-                    {invocaPhoneNumberDisplayText}
-                  </Text>
-                </CallButton>
-              ) : null}
-              {displayCartIcon ? (
-                <Link
-                  href={cartHref || "#"}
-                  className="relative inline-flex cursor-pointer"
-                  aria-label={cartIconAriaLabel}
-                  onClick={onCartClick}
-                >
-                  <MaterialIcon name="shopping_cart" />
-                  {cartHasRetention ? (
-                    <span className="absolute -right-2 -top-1 h-2.5 w-2.5 rounded-full bg-icon-brand" />
-                  ) : null}
-                </Link>
-              ) : null}
-              {hasMobileMenuItems ? <MobileMenu {...props} /> : null}
-            </div>
-          </div>
-
-          <div className="desktop-nav-section hidden lg:block lg:border-b lg:px-2">
-            <div className="mx-auto flex h-14 max-w-120 items-center justify-between">
-              <div className="flex h-full">
-                {logoUrl ? (
-                  <Link href="/" className="flex">
-                    <NextImage
-                      src={logoUrl}
-                      alt="Kinetic business logo"
-                      width={primaryNavigationLogoWidth}
-                      height={primaryNavigationLogoHeight}
-                      className="mr-[64px]"
-                    />
-                  </Link>
-                ) : null}
-
-                <div className="flex h-full items-center gap-5">
-                  {primaryNavigationLinks?.map((links, index) => {
-                    return (
-                      <DesktopLinkGroups
-                        key={`main-menu-${index}`}
-                        anchorName={`main-menu-${index}`}
-                        link={links}
-                        linkColorClassName={navigationLinkColor}
-                      />
-                    );
-                  })}
-                </div>
-              </div>
-              <div className="flex h-full items-center gap-10">
-                {displaySearchBar ? (
-                  <DesktopSearchInput
-                    searchBarIconURL={
-                      typeof searchBarIcon === "string"
-                        ? searchBarIcon
-                        : searchBarIcon?.url || ""
-                    }
-                    onSearch={onSearch}
-                  />
-                ) : null}
-                {supportNavigationLinks?.map((links, index) => {
-                  return (
-                    <DesktopLinkGroups
-                      key={`support-menu-${index}`}
-                      anchorName={`support-menu-${index}`}
-                      link={links}
-                      linkColorClassName={navigationLinkColor}
-                    />
-                  );
-                })}
-              </div>
-            </div>
-          </div>
-        </div>
-      </nav>
-
-      {checkPlansJSX && <div className="md:hidden">{checkPlansJSX}</div>}
-    </div>
-  );
-};
-
-const MobileMenu = (props: NavigationProps) => {
-  const {
-    primaryNavigationLinks,
-    utilityNavigationLinks,
-    supportNavigationLinks,
-    accountNavigationLinks,
-    showCallButton,
-    displayCallNowCta,
-    displaySearchBar,
-  } = props;
-  const [isOpen, setIsOpen] = React.useState(false);
-
-  React.useEffect(() => {
-    if (typeof window === "undefined") return;
-
-    if (isOpen) document.body.style.overflowY = "hidden";
-    else document.body.style.overflowY = "unset";
-
-    const element = document.getElementById("drawer-items");
-    if (!element) return;
-
-    const focusableEls = element.querySelectorAll(".focus-item");
-    const firstFocusableEl = focusableEls[0];
-    const lastFocusableEl = focusableEls[focusableEls.length - 1];
-
-    const handleKeyDown = (e: {
-      key: string;
-      keyCode: number;
-      shiftKey: any;
-      preventDefault: () => void;
-    }) => {
-      const isTabPressed = e.key === "Tab" || e.keyCode === 9;
-
-      if (!isTabPressed) return;
-
-      if (e.shiftKey) {
-        if (document.activeElement === firstFocusableEl) {
-          (lastFocusableEl as HTMLButtonElement).focus?.();
-          e.preventDefault();
-        }
-      } else {
-        if (document.activeElement === lastFocusableEl) {
-          (firstFocusableEl as HTMLButtonElement).focus?.();
-          e.preventDefault();
-        }
-      }
-    };
-
-    window.addEventListener("keydown", handleKeyDown);
-
-    return () => {
-      document.body.style.overflowY = "unset";
-      window.removeEventListener("keydown", handleKeyDown);
-    };
-  }, [isOpen]);
-
-  const closeMenu = () => {
-    setIsOpen(false);
-  };
-
-  return (
-    <div>
-      <ContentfulButton
-        showButtonAs="unstyled"
-        buttonClassName="flex"
-        onClick={() => setIsOpen(true)}
-      >
-        <MaterialIcon name="menu" />
-      </ContentfulButton>
-      {isOpen ? (
-        <div className="fixed bottom-0 left-0 right-0 top-0 z-[90] h-full w-full bg-scrim-bg-modal"></div>
-      ) : null}
-
-      <div
-        className={cx(
-          "fixed bottom-0 right-0 top-0",
-          "z-[100] h-full bg-bg px-0 py-4 text-text",
-          "transition-all duration-300 ease-in-out",
-          "block",
-          isOpen ? "right-0" : "-right-96"
-        )}
-        id="mobile-menu-overlay"
-      >
-        <div id="drawer-items" className="flex h-full flex-col gap-3">
-          <div
-            className={cx(
-              "flex items-center px-4",
-              showCallButton !== false || displayCallNowCta !== false
-                ? "justify-between"
-                : "justify-end"
-            )}
-          >
-            {showCallButton !== false || displayCallNowCta !== false ? (
-              <div>
-                <CallButton
-                  className="border-none"
-                  href={props.invocaPhoneNumberLink}
-                  onClick={props.onCallClickMobile}
-                >
-                  {props.invocaPhoneNumberDisplayText}
-                </CallButton>
-              </div>
-            ) : null}
-            <div>
-              <ContentfulButton
-                showButtonAs="unstyled"
-                buttonClassName="focus-item flex"
-                onClick={closeMenu}
-              >
-                <MaterialIcon name="close" />
-              </ContentfulButton>
-            </div>
-          </div>
-          {displaySearchBar !== false ? (
-            <MobileSearchInput
-              closeMenu={closeMenu}
-              isMenuOpen={isOpen}
-              searchBarIconURL={
-                typeof props.searchBarIcon === "string"
-                  ? props.searchBarIcon
-                  : props.searchBarIcon?.url || ""
-              }
-              onSearch={props.onSearch || (() => {})}
-            />
-          ) : null}
-          <div
-            className="flex-grow overflow-y-auto"
-            onClick={event => {
-              // Close the drawer when a link (anchor) is clicked.
-              // Group-toggle buttons render as <button> and won't match,
-              // so they continue to expand/collapse normally.
-              // Required for Pages Router where MobileMenu persists across
-              // client-side navigations and its local `isOpen` state would
-              // otherwise stay true on the new route.
-              const target = event.target as HTMLElement | null;
-              if (target?.closest("a")) {
-                closeMenu();
-              }
-            }}
-          >
-            <ul className="mt-2 flex flex-col gap-2">
-              {[
-                ...(primaryNavigationLinks || []),
-                ...(supportNavigationLinks || []),
-                ...(accountNavigationLinks || []),
-              ].map((links, index) => (
-                <li key={`main-menu-items-${index}`}>
-                  <MobileLinkGroups link={links} />
-                </li>
-              ))}
-            </ul>
-
-            <ul className="mt-2 flex gap-5 bg-bg-fill-info px-4">
-              {utilityNavigationLinks?.map((link, index) => {
-                return (
-                  <li key={`utility-menu-items-${index}`}>
-                    <ContentfulButton
-                      key={`utility-submenu-link-btn-${link.anchorId}`}
-                      {...(Object.fromEntries(
-                        Object.entries(link).filter(([_, v]) => v !== null)
-                      ) as any)}
-                      linkClassName={cx(
-                        "footnote flex items-center w-full h-11 text-text-link",
-                        typeof props.utilityNavActiveIndex !== "number"
-                          ? index === 1 && "label4"
-                          : props.utilityNavActiveIndex === index && "label4"
-                      )}
-                      linkVariant="unstyled"
-                    />
-                  </li>
-                );
-              })}
-            </ul>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-const MobileSearchInput = (props: {
-  closeMenu: () => void;
-  onSearch: (query: string) => void;
-  isMenuOpen: boolean;
-  searchBarIconURL: string;
-}) => {
-  const { closeMenu, onSearch, isMenuOpen, searchBarIconURL } = props;
-  const [searchValue, setSearchValue] = React.useState("");
-  const searchInputRef = React.useRef<HTMLInputElement>(null);
-
-  const redirectToSearchResults = (e: FormEvent<HTMLFormElement> | any) => {
-    closeMenu();
-    e.preventDefault();
-    onSearch(searchValue);
-  };
-
-  React.useEffect(() => {
-    if (!isMenuOpen) {
-      setSearchValue("");
-    }
-  }, [isMenuOpen]);
-
-  return (
-    <form
-      name="searchForm"
-      className="flex border-b border-t transition-colors focus-within:border-border-focus"
-      onSubmit={redirectToSearchResults}
-    >
-      <NextImage
-        src={searchBarIconURL}
-        width={32}
-        height={32}
-        alt="Search icon"
-        role="button"
-        className="ml-2"
-        onClick={redirectToSearchResults}
-      />
-      <div className="flex-grow">
-        <Input
-          ref={searchInputRef}
-          className={"body3 h-[34px] rounded-none px-3 text-text"}
-          name="search"
-          placeholder="Search..."
-          value={searchValue}
-          onChange={e => setSearchValue(e.target.value)}
-          autoComplete="off"
-          containerClassName="h-[46px] px-4 pl-0 rounded-none flex-grow border-none"
-        />
-      </div>
-    </form>
-  );
-};
-
-const DesktopSearchInput = (props: {
-  searchBarIconURL: string;
-  onSearch: (query: string) => void;
-}) => {
-  const { searchBarIconURL, onSearch } = props;
-  const [searchValue, setSearchValue] = React.useState("");
-  const searchInputRef = React.useRef<HTMLInputElement>(null);
-
-  const redirectToSearchResults = (e: FormEvent<HTMLFormElement> | any) => {
-    e.preventDefault();
-    onSearch(searchValue);
-  };
-
-  return (
-    <form
-      name="searchForm"
-      className="flex h-9 w-60 rounded-input-xl border px-1 transition-colors focus-within:border-border-focus"
-      onSubmit={redirectToSearchResults}
-    >
-      <NextImage
-        src={searchBarIconURL}
-        width={32}
-        height={32}
-        alt="Search icon"
-        role="button"
-        onClick={redirectToSearchResults}
-      />
-      <Input
-        ref={searchInputRef}
-        className={"body3 rounded-full px-3 text-text"}
-        name="search"
-        placeholder="Search..."
-        value={searchValue}
-        onChange={e => setSearchValue(e.target.value)}
-        autoComplete="off"
-        containerClassName="px-0 h-full border-none rounded-full"
-      />
-    </form>
-  );
-};
+import React, { FormEvent } from "react";
+import { DesktopLinkGroups } from "./desktop-link-groups.tsx";
+import { MobileLinkGroups } from "./mobile-link-groups.tsx";
+import { NavigationProps } from "./types";
+
+import { CallButton } from "@shared/components/call-button";
+import { Input } from "@shared/components/input";
+import { Link } from "@shared/components/link";
+import { MaterialIcon } from "@shared/components/material-icon";
+import { NextImage } from "@shared/components/next-image";
+import { Text } from "@shared/components/text";
+import { Button as ContentfulButton } from "@shared/contentful/blocks/button";
+import { cx } from "@shared/utils";
+
+export const Navigation: React.FC<NavigationProps> = props => {
+  const {
+    primaryNavigationLinks,
+    utilityNavigationLinks,
+    checkPlansJSX,
+    primaryNavigationLogo,
+    accountNavigationLinks,
+    supportNavigationLinks,
+    searchBarIcon,
+    invocaPhoneNumberLink,
+    invocaPhoneNumberDisplayText,
+    callNowCtaText,
+    displayCartIcon,
+    cartHref,
+    cartHasRetention,
+    cartIconAriaLabel = "Cart",
+    onCallClickDesktop,
+    onCallClickMobile,
+    onCartClick,
+    onSearch = () => {},
+    utilityNavActiveIndex,
+    primaryNavigationLogoWidth = 76.5,
+    primaryNavigationLogoHeight = 24,
+    hideMobileCallButton = false,
+    displayUtilityNavigation = true,
+    displaySearchBar = true,
+    displayCallNowCta = true,
+    showCallButton = true,
+    showCallNowCtaInMainNav = false,
+    showMobileSliderMenu = true,
+    callNowCtaIcon,
+    navigationBackgroundColor,
+    navigationLinkColor,
+  } = props;
+
+  const logoUrl =
+    typeof primaryNavigationLogo === "string"
+      ? primaryNavigationLogo
+      : primaryNavigationLogo?.url || "";
+
+  // Background token convention matches the legacy ResidentialNavbar:
+  // when CMS provides a token like "navy500" we map it to
+  // `bg-secondary-navy500`. Raw Tailwind classes (containing a `-`)
+  // are passed through untouched. Defaults to `bg-secondary-navy500`
+  // to preserve legacy behavior when CMS leaves the field empty.
+  const mainNavBgClass = navigationBackgroundColor
+    ? navigationBackgroundColor.includes("-") ||
+      navigationBackgroundColor.startsWith("bg-")
+      ? navigationBackgroundColor
+      : `bg-secondary-${navigationBackgroundColor}`
+    : "bg-secondary-navy500";
+
+  const callNowCtaIconUrl =
+    typeof callNowCtaIcon === "string"
+      ? callNowCtaIcon
+      : callNowCtaIcon?.url || "";
+
+  // Styled "Call Now" pill used in the main nav rows when CMS opts in via
+  // `showCallNowCtaInMainNav` (desktop) or when the mobile slider menu is
+  // disabled (`showMobileSliderMenu: false`). Mirrors the legacy
+  // ResidentialNavbar styling so existing CMS entries render identically.
+  const renderMainNavCallCta = (
+    onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void
+  ) => (
+    <Link
+      href={invocaPhoneNumberLink || "#"}
+      onClick={onClick}
+      className="bg-secondary-gray100 text-secondary-navy500 inline-flex h-8 items-center rounded-full pl-1 pr-2 no-underline shadow-none"
+      aria-label={
+        invocaPhoneNumberDisplayText
+          ? `Call ${invocaPhoneNumberDisplayText}`
+          : "Call now"
+      }
+    >
+      {callNowCtaIconUrl ? (
+        <NextImage
+          src={callNowCtaIconUrl}
+          alt="Call us"
+          width={24}
+          height={24}
+          className="mr-2 self-center rounded-full"
+        />
+      ) : null}
+      <Text as="span" className="text-secondary-navy500 footnote">
+        {invocaPhoneNumberDisplayText}
+      </Text>
+    </Link>
+  );
+
+  const hasMobileMenuItems =
+    (primaryNavigationLinks?.length ?? 0) > 0 ||
+    (supportNavigationLinks?.length ?? 0) > 0 ||
+    (accountNavigationLinks?.length ?? 0) > 0;
+
+  return (
+    <div className="component-container">
+      <nav className={`menu-container z-[1000]`}>
+        {displayUtilityNavigation ? (
+          <div className="utility-container hidden lg:block lg:border-b lg:px-2">
+            <div className="mx-auto flex max-w-120 justify-between">
+              <ul className="flex gap-5" aria-label="Utility Navigation">
+                {utilityNavigationLinks?.map((links, index) => {
+                  return (
+                    <li key={`main-menu-items-${index}`}>
+                      <ContentfulButton
+                        linkClassName={cx(
+                          "footnote flex items-center w-full h-11 text-text",
+                          // If utilityNavActiveIndex is not provided, default to making the second link active (for existing business app). If utilityNavActiveIndex is provided, use it to determine which link is active.
+                          typeof utilityNavActiveIndex !== "number"
+                            ? index === 1 && "label4"
+                            : utilityNavActiveIndex === index && "label4"
+                        )}
+                        linkVariant="unstyled"
+                        {...(Object.fromEntries(
+                          Object.entries(links).filter(([_, v]) => v !== null)
+                        ) as any)}
+                      />
+                    </li>
+                  );
+                })}
+              </ul>
+              <div className="flex items-center gap-10">
+                {displayCallNowCta ? (
+                  <CallButton
+                    className="border-none"
+                    href={invocaPhoneNumberLink}
+                    prefix={callNowCtaText}
+                    onClick={onCallClickDesktop}
+                  >
+                    <Text className="body3 text-text">
+                      {invocaPhoneNumberDisplayText}
+                    </Text>
+                  </CallButton>
+                ) : null}
+                {displayCartIcon ? (
+                  <Link
+                    href={cartHref || "#"}
+                    className="relative inline-flex cursor-pointer"
+                    aria-label={cartIconAriaLabel}
+                    onClick={onCartClick}
+                  >
+                    <MaterialIcon name="shopping_cart" />
+                    {cartHasRetention ? (
+                      <span className="absolute -right-2 -top-1 h-2.5 w-2.5 rounded-full bg-icon-brand" />
+                    ) : null}
+                  </Link>
+                ) : null}
+                {accountNavigationLinks?.map((links, index) => {
+                  return (
+                    <DesktopLinkGroups
+                      key={`my-account-${index}`}
+                      anchorName={`my-account-${index}`}
+                      link={links}
+                    />
+                  );
+                })}
+              </div>
+            </div>
+          </div>
+        ) : null}
+        <div
+          className={cx(
+            "main-nav-container",
+            mainNavBgClass,
+            navigationLinkColor
+          )}
+          aria-label="Main Navigation"
+        >
+          <div className="mobile-nav-section flex h-14 items-center justify-between border border-b px-5 py-[10px] lg:hidden">
+            <div>
+              {logoUrl ? (
+                <Link href="/" className="flex">
+                  <NextImage
+                    src={logoUrl}
+                    alt="Kinetic business logo"
+                    width={primaryNavigationLogoWidth}
+                    height={primaryNavigationLogoHeight}
+                  />
+                </Link>
+              ) : null}
+            </div>
+            <div className="flex items-center gap-6">
+              {!showMobileSliderMenu ? (
+                showCallButton ? (
+                  renderMainNavCallCta(onCallClickMobile)
+                ) : null
+              ) : (
+                <>
+                  {showCallButton && !hideMobileCallButton ? (
+                    <CallButton
+                      href={invocaPhoneNumberLink}
+                      onClick={onCallClickMobile}
+                    >
+                      <Text as="span" className="footnote">
+                        {invocaPhoneNumberDisplayText}
+                      </Text>
+                    </CallButton>
+                  ) : null}
+                  {displayCartIcon ? (
+                    <Link
+                      href={cartHref || "#"}
+                      className="relative inline-flex cursor-pointer"
+                      aria-label={cartIconAriaLabel}
+                      onClick={onCartClick}
+                    >
+                      <MaterialIcon name="shopping_cart" />
+                      {cartHasRetention ? (
+                        <span className="absolute -right-2 -top-1 h-2.5 w-2.5 rounded-full bg-icon-brand" />
+                      ) : null}
+                    </Link>
+                  ) : null}
+                  {hasMobileMenuItems ? <MobileMenu {...props} /> : null}
+                </>
+              )}
+            </div>
+          </div>
+
+          <div className="desktop-nav-section hidden lg:block lg:border-b lg:px-2">
+            <div className="mx-auto flex h-14 max-w-120 items-center justify-between">
+              <div className="flex h-full">
+                {logoUrl ? (
+                  <Link href="/" className="flex">
+                    <NextImage
+                      src={logoUrl}
+                      alt="Kinetic business logo"
+                      width={primaryNavigationLogoWidth}
+                      height={primaryNavigationLogoHeight}
+                      className="mr-[64px]"
+                    />
+                  </Link>
+                ) : null}
+
+                <div className="flex h-full items-center gap-5">
+                  {primaryNavigationLinks?.map((links, index) => {
+                    return (
+                      <DesktopLinkGroups
+                        key={`main-menu-${index}`}
+                        anchorName={`main-menu-${index}`}
+                        link={links}
+                        linkColorClassName={navigationLinkColor}
+                      />
+                    );
+                  })}
+                </div>
+              </div>
+              <div className="flex h-full items-center gap-10">
+                {showCallNowCtaInMainNav
+                  ? renderMainNavCallCta(onCallClickDesktop)
+                  : null}
+                {displaySearchBar ? (
+                  <DesktopSearchInput
+                    searchBarIconURL={
+                      typeof searchBarIcon === "string"
+                        ? searchBarIcon
+                        : searchBarIcon?.url || ""
+                    }
+                    onSearch={onSearch}
+                  />
+                ) : null}
+                {supportNavigationLinks?.map((links, index) => {
+                  return (
+                    <DesktopLinkGroups
+                      key={`support-menu-${index}`}
+                      anchorName={`support-menu-${index}`}
+                      link={links}
+                      linkColorClassName={navigationLinkColor}
+                    />
+                  );
+                })}
+              </div>
+            </div>
+          </div>
+        </div>
+      </nav>
+
+      {checkPlansJSX && <div className="md:hidden">{checkPlansJSX}</div>}
+    </div>
+  );
+};
+
+const MobileMenu = (props: NavigationProps) => {
+  const {
+    primaryNavigationLinks,
+    utilityNavigationLinks,
+    supportNavigationLinks,
+    accountNavigationLinks,
+    showCallButton,
+    displayCallNowCta,
+    displaySearchBar,
+  } = props;
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  React.useEffect(() => {
+    if (typeof window === "undefined") return;
+
+    if (isOpen) document.body.style.overflowY = "hidden";
+    else document.body.style.overflowY = "unset";
+
+    const element = document.getElementById("drawer-items");
+    if (!element) return;
+
+    const focusableEls = element.querySelectorAll(".focus-item");
+    const firstFocusableEl = focusableEls[0];
+    const lastFocusableEl = focusableEls[focusableEls.length - 1];
+
+    const handleKeyDown = (e: {
+      key: string;
+      keyCode: number;
+      shiftKey: any;
+      preventDefault: () => void;
+    }) => {
+      const isTabPressed = e.key === "Tab" || e.keyCode === 9;
+
+      if (!isTabPressed) return;
+
+      if (e.shiftKey) {
+        if (document.activeElement === firstFocusableEl) {
+          (lastFocusableEl as HTMLButtonElement).focus?.();
+          e.preventDefault();
+        }
+      } else {
+        if (document.activeElement === lastFocusableEl) {
+          (firstFocusableEl as HTMLButtonElement).focus?.();
+          e.preventDefault();
+        }
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+
+    return () => {
+      document.body.style.overflowY = "unset";
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [isOpen]);
+
+  const closeMenu = () => {
+    setIsOpen(false);
+  };
+
+  return (
+    <div>
+      <ContentfulButton
+        showButtonAs="unstyled"
+        buttonClassName="flex"
+        onClick={() => setIsOpen(true)}
+      >
+        <MaterialIcon name="menu" />
+      </ContentfulButton>
+      {isOpen ? (
+        <div className="fixed bottom-0 left-0 right-0 top-0 z-[90] h-full w-full bg-scrim-bg-modal"></div>
+      ) : null}
+
+      <div
+        className={cx(
+          "fixed bottom-0 right-0 top-0",
+          "z-[100] h-full bg-bg px-0 py-4 text-text",
+          "transition-all duration-300 ease-in-out",
+          "block",
+          isOpen ? "right-0" : "-right-96"
+        )}
+        id="mobile-menu-overlay"
+      >
+        <div id="drawer-items" className="flex h-full flex-col gap-3">
+          <div
+            className={cx(
+              "flex items-center px-4",
+              showCallButton !== false || displayCallNowCta !== false
+                ? "justify-between"
+                : "justify-end"
+            )}
+          >
+            {showCallButton !== false || displayCallNowCta !== false ? (
+              <div>
+                <CallButton
+                  className="border-none"
+                  href={props.invocaPhoneNumberLink}
+                  onClick={props.onCallClickMobile}
+                >
+                  {props.invocaPhoneNumberDisplayText}
+                </CallButton>
+              </div>
+            ) : null}
+            <div>
+              <ContentfulButton
+                showButtonAs="unstyled"
+                buttonClassName="focus-item flex"
+                onClick={closeMenu}
+              >
+                <MaterialIcon name="close" />
+              </ContentfulButton>
+            </div>
+          </div>
+          {displaySearchBar !== false ? (
+            <MobileSearchInput
+              closeMenu={closeMenu}
+              isMenuOpen={isOpen}
+              searchBarIconURL={
+                typeof props.searchBarIcon === "string"
+                  ? props.searchBarIcon
+                  : props.searchBarIcon?.url || ""
+              }
+              onSearch={props.onSearch || (() => {})}
+            />
+          ) : null}
+          <div
+            className="flex-grow overflow-y-auto"
+            onClick={event => {
+              // Close the drawer when a link (anchor) is clicked.
+              // Group-toggle buttons render as <button> and won't match,
+              // so they continue to expand/collapse normally.
+              // Required for Pages Router where MobileMenu persists across
+              // client-side navigations and its local `isOpen` state would
+              // otherwise stay true on the new route.
+              const target = event.target as HTMLElement | null;
+              if (target?.closest("a")) {
+                closeMenu();
+              }
+            }}
+          >
+            <ul className="mt-2 flex flex-col gap-2">
+              {[
+                ...(primaryNavigationLinks || []),
+                ...(supportNavigationLinks || []),
+                ...(accountNavigationLinks || []),
+              ].map((links, index) => (
+                <li key={`main-menu-items-${index}`}>
+                  <MobileLinkGroups link={links} />
+                </li>
+              ))}
+            </ul>
+
+            <ul className="mt-2 flex gap-5 bg-bg-fill-info px-4">
+              {utilityNavigationLinks?.map((link, index) => {
+                return (
+                  <li key={`utility-menu-items-${index}`}>
+                    <ContentfulButton
+                      key={`utility-submenu-link-btn-${link.anchorId}`}
+                      {...(Object.fromEntries(
+                        Object.entries(link).filter(([_, v]) => v !== null)
+                      ) as any)}
+                      linkClassName={cx(
+                        "footnote flex items-center w-full h-11 text-text-link",
+                        typeof props.utilityNavActiveIndex !== "number"
+                          ? index === 1 && "label4"
+                          : props.utilityNavActiveIndex === index && "label4"
+                      )}
+                      linkVariant="unstyled"
+                    />
+                  </li>
+                );
+              })}
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const MobileSearchInput = (props: {
+  closeMenu: () => void;
+  onSearch: (query: string) => void;
+  isMenuOpen: boolean;
+  searchBarIconURL: string;
+}) => {
+  const { closeMenu, onSearch, isMenuOpen, searchBarIconURL } = props;
+  const [searchValue, setSearchValue] = React.useState("");
+  const searchInputRef = React.useRef<HTMLInputElement>(null);
+
+  const redirectToSearchResults = (e: FormEvent<HTMLFormElement> | any) => {
+    closeMenu();
+    e.preventDefault();
+    onSearch(searchValue);
+  };
+
+  React.useEffect(() => {
+    if (!isMenuOpen) {
+      setSearchValue("");
+    }
+  }, [isMenuOpen]);
+
+  return (
+    <form
+      name="searchForm"
+      className="flex border-b border-t transition-colors focus-within:border-border-focus"
+      onSubmit={redirectToSearchResults}
+    >
+      <NextImage
+        src={searchBarIconURL}
+        width={32}
+        height={32}
+        alt="Search icon"
+        role="button"
+        className="ml-2"
+        onClick={redirectToSearchResults}
+      />
+      <div className="flex-grow">
+        <Input
+          ref={searchInputRef}
+          className={"body3 h-[34px] rounded-none px-3 text-text"}
+          name="search"
+          placeholder="Search..."
+          value={searchValue}
+          onChange={e => setSearchValue(e.target.value)}
+          autoComplete="off"
+          containerClassName="h-[46px] px-4 pl-0 rounded-none flex-grow border-none"
+        />
+      </div>
+    </form>
+  );
+};
+
+const DesktopSearchInput = (props: {
+  searchBarIconURL: string;
+  onSearch: (query: string) => void;
+}) => {
+  const { searchBarIconURL, onSearch } = props;
+  const [searchValue, setSearchValue] = React.useState("");
+  const searchInputRef = React.useRef<HTMLInputElement>(null);
+
+  const redirectToSearchResults = (e: FormEvent<HTMLFormElement> | any) => {
+    e.preventDefault();
+    onSearch(searchValue);
+  };
+
+  return (
+    <form
+      name="searchForm"
+      className="flex h-9 w-60 rounded-input-xl border px-1 transition-colors focus-within:border-border-focus"
+      onSubmit={redirectToSearchResults}
+    >
+      <NextImage
+        src={searchBarIconURL}
+        width={32}
+        height={32}
+        alt="Search icon"
+        role="button"
+        onClick={redirectToSearchResults}
+      />
+      <Input
+        ref={searchInputRef}
+        className={"body3 rounded-full px-3 text-text"}
+        name="search"
+        placeholder="Search..."
+        value={searchValue}
+        onChange={e => setSearchValue(e.target.value)}
+        autoComplete="off"
+        containerClassName="px-0 h-full border-none rounded-full"
+      />
+    </form>
+  );
+};