diff --git a/src/ILLATheme/CommonHeader/MobileMenu/constant.ts b/src/ILLATheme/CommonHeader/MobileMenu/constant.ts deleted file mode 100644 index 1ba0c5df37..0000000000 --- a/src/ILLATheme/CommonHeader/MobileMenu/constant.ts +++ /dev/null @@ -1 +0,0 @@ -export const CONTACT_US_URL = 'https://calendly.com/illa-demo/0295'; diff --git a/src/ILLATheme/CommonHeader/MobileMenu/index.tsx b/src/ILLATheme/CommonHeader/MobileMenu/index.tsx index ee3248a261..1d7c82df6a 100644 --- a/src/ILLATheme/CommonHeader/MobileMenu/index.tsx +++ b/src/ILLATheme/CommonHeader/MobileMenu/index.tsx @@ -6,8 +6,6 @@ import { sendTagEvent } from "@site/src/utils/gtag" import { MENU_ITEMS, SOLUTIONS } from "../constants" import LocaleDropdownNavbarItem from "@theme/NavbarItem/LocaleDropdownNavbarItem" import CloseWhiteIcon from "@site/static/img/public/close.svg" -import { CONTACT_US_URL } from "./constant" -import Translate from "@docusaurus/Translate" import { Disclosure } from "@headlessui/react" import { MenuItem } from "./menuItem" import style from "./index.module.css" @@ -71,19 +69,6 @@ const MobileMenu = ({ menuExpand, closeMenu }) => { ) })} - { - sendTagEvent({ - action: "click", - category: "homepage_menu_contact_click", - }) - closeMenu && closeMenu() - }} - className={style.menuItemStyle} - > - Book demo -
isItemActive(item, localPathname)); + return items.some((item) => isItemActive(item, localPathname)) } function DropdownNavbarItemDesktop({ items, @@ -31,45 +31,50 @@ function DropdownNavbarItemDesktop({ onClick, ...props }) { - const dropdownRef = useRef(null); - const [showDropdown, setShowDropdown] = useState(false); + const dropdownRef = useRef(null) + const [showDropdown, setShowDropdown] = useState(false) useEffect(() => { const handleClickOutside = (event) => { if (!dropdownRef.current || dropdownRef.current.contains(event.target)) { - return; + return } - setShowDropdown(false); - }; - document.addEventListener('mousedown', handleClickOutside); - document.addEventListener('touchstart', handleClickOutside); - document.addEventListener('focusin', handleClickOutside); + setShowDropdown(false) + } + document.addEventListener("mousedown", handleClickOutside) + document.addEventListener("touchstart", handleClickOutside) + document.addEventListener("focusin", handleClickOutside) return () => { - document.removeEventListener('mousedown', handleClickOutside); - document.removeEventListener('touchstart', handleClickOutside); - document.removeEventListener('focusin', handleClickOutside); - }; - }, [dropdownRef]); + document.removeEventListener("mousedown", handleClickOutside) + document.removeEventListener("touchstart", handleClickOutside) + document.removeEventListener("focusin", handleClickOutside) + } + }, [dropdownRef]) return (
+ className={clsx("navbar__item", "dropdown", { + "dropdown--right": position === "right", + "dropdown--show": showDropdown, + })} + onClick={() => { + setShowDropdown(!showDropdown) + }} + > e.preventDefault()} onKeyDown={(e) => { - if (e.key === 'Enter') { - e.preventDefault(); - setShowDropdown(!showDropdown); + if (e.key === "Enter") { + e.preventDefault() + setShowDropdown(!showDropdown) } - }}> + }} + > {props.children ?? props.label}
    @@ -83,7 +88,7 @@ function DropdownNavbarItemDesktop({ ))}
- ); + ) } function DropdownNavbarItemMobile({ items, @@ -92,34 +97,36 @@ function DropdownNavbarItemMobile({ onClick, ...props }) { - const localPathname = useLocalPathname(); - const containsActive = containsActiveItems(items, localPathname); - const {collapsed, toggleCollapsed, setCollapsed} = useCollapsible({ + const localPathname = useLocalPathname() + const containsActive = containsActiveItems(items, localPathname) + const { collapsed, toggleCollapsed, setCollapsed } = useCollapsible({ initialState: () => !containsActive, - }); + }) // Expand/collapse if any item active after a navigation useEffect(() => { if (containsActive) { - setCollapsed(!containsActive); + setCollapsed(!containsActive) } - }, [localPathname, containsActive, setCollapsed]); + }, [localPathname, containsActive, setCollapsed]) return (
  • + className={clsx("menu__list-item", { + "menu__list-item--collapsed": collapsed, + })} + > { - e.preventDefault(); - toggleCollapsed(); - }}> + e.preventDefault() + toggleCollapsed() + }} + > {props.children ?? props.label} @@ -135,9 +142,9 @@ function DropdownNavbarItemMobile({ ))}
  • - ); + ) } -export default function DropdownNavbarItem({mobile = false, ...props}) { - const Comp = mobile ? DropdownNavbarItemMobile : DropdownNavbarItemDesktop; - return ; +export default function DropdownNavbarItem({ mobile = false, ...props }) { + const Comp = mobile ? DropdownNavbarItemMobile : DropdownNavbarItemDesktop + return }