From a2d63c143de1e461e40bc9c5236e3dc87008bb65 Mon Sep 17 00:00:00 2001
From: Val <44112412+LawfaL@users.noreply.github.com>
Date: Tue, 25 Feb 2025 00:23:35 +0700
Subject: [PATCH] fix: navbar dropdown not showing on mobile view

---
 src/app/(main)/coba/page.tsx |  3 ---
 src/components/HeaderNav.tsx | 37 ++++++++++++------------------------
 2 files changed, 12 insertions(+), 28 deletions(-)
 delete mode 100644 src/app/(main)/coba/page.tsx

diff --git a/src/app/(main)/coba/page.tsx b/src/app/(main)/coba/page.tsx
deleted file mode 100644
index bd501c7..0000000
--- a/src/app/(main)/coba/page.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-export default function CobaPage() {
-  return <></>;
-}
diff --git a/src/components/HeaderNav.tsx b/src/components/HeaderNav.tsx
index 378edb2..1cce3db 100644
--- a/src/components/HeaderNav.tsx
+++ b/src/components/HeaderNav.tsx
@@ -8,15 +8,15 @@ import { useEffect, useRef, useState } from "react";
 import Link from "next/link";
 
 export default function HeaderNav({ links, animateY = false }: any) {
-  const [isDropdownOpen] = useState([""]);
+  const [isDropdownOpen, setIsDropdownOpen] = useState([""]);
   const dropdownRef = useRef(null);
 
-  // const toggleDropdown = (section: string[]) => {
-  //   if (section == isDropdownOpen) {
-  //     setIsDropdownOpen([""]);
-  //   }
-  //   setIsDropdownOpen(section);
-  // };
+  const toggleDropdown = (section: string[]) => {
+    if (section == isDropdownOpen) {
+      setIsDropdownOpen([""]);
+    }
+    setIsDropdownOpen(section);
+  };
 
   useEffect(() => {
     setTimeout(() => {
@@ -55,15 +55,8 @@ export default function HeaderNav({ links, animateY = false }: any) {
 
             {Array.isArray(link?.child) && (
               <>
-                <Link
-                  href={link?.href ?? "#"}
-                  className="mn-has-sub"
-                  // onClick={(e) => {
-                  //   e.preventDefault();
-                  //   toggleDropdown([link.text]);
-                  // }}
-                >
-                  {link.text} <i className="mi-chevron-down" />
+                <Link href={link?.href ?? "#"} className="mn-has-sub">
+                  {link.text} <i className="mi-chevron-down" onClick={() => toggleDropdown([link.text])} />
                 </Link>
 
                 <ul className={`mn-sub to-right ${isDropdownOpen.includes(link.text) && "open"}`} ref={dropdownRef}>
@@ -76,15 +69,9 @@ export default function HeaderNav({ links, animateY = false }: any) {
                       )}
                       {Array.isArray(subLink?.child) && (
                         <>
-                          <Link
-                            href={subLink?.href ?? "#"}
-                            className="mn-has-sub"
-                            // onClick={(e) => {
-                            //   e.preventDefault();
-                            //   toggleDropdown([link.text, subLink.text]);
-                            // }}
-                          >
-                            {subLink.text} <i className="mi-chevron-down" />
+                          <Link href={subLink?.href ?? "#"} className="mn-has-sub">
+                            {subLink.text}{" "}
+                            <i className="mi-chevron-down" onClick={() => toggleDropdown([link.text, subLink.text])} />
                           </Link>
 
                           <ul className={`mn-sub to-right ${isDropdownOpen.includes(subLink.text) && "open"}`}>