From 1b686cd9126a4393e04b618e8a35a9dd037cfdc1 Mon Sep 17 00:00:00 2001
From: RizqiSyahrendra <rizqialaudinsyahrendra@gmail.com>
Date: Wed, 12 Mar 2025 11:54:33 +0700
Subject: [PATCH] fix :mobile sub dropdown click bug and hero mobile padding

---
 src/components/HeaderNav.tsx  | 4 +++-
 src/components/HeroOther.tsx  | 4 ++--
 src/utils/toggleMobileMenu.ts | 4 ++--
 3 files changed, 7 insertions(+), 5 deletions(-)

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");
   }