diff --git a/src/components/HeaderNav.tsx b/src/components/HeaderNav.tsx index c259470..ec96ccc 100644 --- a/src/components/HeaderNav.tsx +++ b/src/components/HeaderNav.tsx @@ -13,6 +13,7 @@ export default function HeaderNav({ links, animateY = false }: { links: typeof n const [hoveredNavItem, setHoveredNavItem] = useState(""); const [hoveredSubNavItem, setHoveredSubNavItem] = useState(""); const [isDropdownOpen, setIsDropdownOpen] = useState([""]); + const [isSubDropdownOpen, setIsSubDropdownOpen] = useState(""); const dropdownRef = useRef(null); const toggleDropdown = (section: string[]) => { @@ -93,13 +94,14 @@ export default function HeaderNav({ links, animateY = false }: { links: typeof n <Link href={subLink?.href ?? "#"} className="mn-has-sub !flex !justify-between !items-center !text-white hover:!text-extColorPrimary3 transition-all duration-500" + onClick={() => setIsSubDropdownOpen(`${index}-${subLinkIdx}`)} > <span className="!text-[14px]">{subLink.text}</span> <FaCaretRight className="ml-2" /> </Link> <ul - className={`mn-sub to-right ${isDropdownOpen.includes(subLink.text) && "open"} ${hoveredSubNavItem.includes(`${index}-${subLinkIdx}`) ? "lg:visible lg:opacity-100 lg:z-10" : "lg:invisible lg:opacity-0"} !bg-extColorPrimary8 !transition-all !duration-300 lg:shadow-nav`} + className={`mn-sub to-right ${isSubDropdownOpen.includes(`${index}-${subLinkIdx}`) && "open"} ${hoveredSubNavItem.includes(`${index}-${subLinkIdx}`) ? "lg:visible lg:opacity-100 lg:z-10" : "lg:invisible lg:opacity-0"} !bg-extColorPrimary8 !transition-all !duration-300 lg:shadow-nav`} > {subLink.child.map((subLink2: any, subLinkIdx2: number) => ( <li key={subLinkIdx2}> diff --git a/src/components/HeroOther.tsx b/src/components/HeroOther.tsx index e66fd35..e8de9a0 100644 --- a/src/components/HeroOther.tsx +++ b/src/components/HeroOther.tsx @@ -16,14 +16,14 @@ const shareIcons: Record<string, any> = { export default function HeroOther({ title, img, createdAt, shareUrl }: HeroOtherProps) { return ( - <section className="page-section bg-dark-1 bg-gradient-gray-dark-1 light-content bg-scroll overflow-hidden !py-20 md:!pt-52 md:!pb-28 relative min-h-[48vh]"> + <section className="page-section bg-dark-1 bg-gradient-gray-dark-1 light-content bg-scroll overflow-hidden !py-20 !pt-52 md:!pb-28 relative min-h-[48vh]"> {/* <!-- Background Shape --> */} <div className="bg-shape-1 w-full h-full opacity-50 bg-contain"> <Image src={img || "/assets/images/hero-default.webp"} alt="" fill className="object-cover" /> </div> {/* <!-- End Background Shape --> */} - <div className="container position-relative pt-sm-40 text-center"> + <div className="container position-relative text-center"> <div className="row"> <div className="col-md-10 offset-md-1 col-lg-8 offset-lg-2"> <h1 className="text-5xl !font-medium mb-10 leading-[1.5]">{title ?? ""}</h1> diff --git a/src/utils/toggleMobileMenu.ts b/src/utils/toggleMobileMenu.ts index f1ecc2e..580da85 100644 --- a/src/utils/toggleMobileMenu.ts +++ b/src/utils/toggleMobileMenu.ts @@ -4,7 +4,7 @@ export const toggleMobileMenu = () => { const desktop_nav = document.querySelector(".desktop-nav"); if (desktop_nav.classList.contains("js-opened")) { - desktop_nav.style.maxHeight = "0px"; + desktop_nav.style.maxHeight = ""; desktop_nav.classList.remove("js-opened"); mobile_nav.classList.remove("active"); } else { @@ -18,7 +18,7 @@ export const closeMobileMenu = () => { const desktop_nav = document.querySelector(".desktop-nav"); if (desktop_nav.classList.contains("js-opened")) { - desktop_nav.style.maxHeight = "0px"; + desktop_nav.style.maxHeight = ""; desktop_nav.classList.remove("js-opened"); mobile_nav.classList.remove("active"); }