fix: header nav shadow and hover animation

public/assets/css/custom.css

@@ -20,13 +20,12 @@
 .dark .light-mode-logo {
   display: none;
 }
-@media (min-width: 1025px) {
+/* @media (min-width: 1025px) {
   .mn-has-sub:hover + *,
   .mn-has-sub + *:hover {
-    display: block !important;
     z-index: 1;
   }
-}
+} */
 
 .fadeInText {
   animation: animationFadeText 0.5s linear 0s 1;

public/assets/css/style.css

@@ -3924,7 +3924,7 @@ a.logo:hover {
   transition: var(--transition-default);
 }
 .mn-sub {
-  display: none;
+  /* opacity: 0; */
   width: 220px;
   position: absolute;
   top: 100%;

src/app/globals.css

@@ -63,6 +63,10 @@ body {
   .ext-btn-shadow-sm-primary8 {
     @apply bg-extColorPrimary8 text-white hover:text-white hover:bg-extColorPrimary6 transition-colors;
   }
+
+  .shadow-nav {
+    @apply !shadow-[0px_0px_10px_0px_rgba(0,0,0,0.24)];
+  }
 }
 
 .bg-gradient {

src/components/HeaderNav.tsx

@@ -10,6 +10,8 @@ import { Fragment, useEffect, useRef, useState } from "react";
 import { FaCaretDown, FaCaretRight } from "react-icons/fa";
 
 export default function HeaderNav({ links, animateY = false }: { links: typeof navMenuData; animateY?: boolean }) {
+  const [hoveredNavItem, setHoveredNavItem] = useState("");
+  const [hoveredSubNavItem, setHoveredSubNavItem] = useState("");
   const [isDropdownOpen, setIsDropdownOpen] = useState([""]);
   const dropdownRef = useRef(null);
 
@@ -59,7 +61,7 @@ export default function HeaderNav({ links, animateY = false }: { links: typeof n
             )}
 
             {Array.isArray(link?.child) && (
-              <>
+              <div onMouseOver={() => setHoveredNavItem(`${index}`)} onMouseLeave={() => setHoveredNavItem("")}>
                 <Link
                   href={link?.href ?? "#"}
                   className="mn-has-sub !flex justify-between items-center !text-white hover:!text-extColorPrimary3 !text-[20px] !transition-all !duration-500"
@@ -67,13 +69,16 @@ export default function HeaderNav({ links, animateY = false }: { links: typeof n
                 >
                   {link.text} <FaCaretDown className="ml-2" />
                 </Link>
-
                 <ul
-                  className={`mn-sub to-right ${isDropdownOpen.includes(link.text) && "open"} lg:!top-[90px] !bg-extColorPrimary8 !shadow-2xl !transition-all !duration-500`}
+                  className={`mn-sub to-right mt-2 ${isDropdownOpen.includes(link.text) && "open"} !bg-extColorPrimary8 ${hoveredNavItem.includes(`${index}`) ? "lg:visible lg:opacity-100 lg:z-10" : "lg:invisible lg:opacity-0"} !transition-all !duration-300 lg:shadow-nav`}
                   ref={dropdownRef}
                 >
                   {link.child.map((subLink: any, subLinkIdx: number) => (
-                    <li key={subLinkIdx}>
+                    <li
+                      key={subLinkIdx}
+                      onMouseOver={() => setHoveredSubNavItem(`${index}-${subLinkIdx}`)}
+                      onMouseLeave={() => setHoveredSubNavItem("")}
+                    >
                       {!Array.isArray(subLink?.child) && (
                         <Link
                           href={subLink?.href}
@@ -94,7 +99,7 @@ export default function HeaderNav({ links, animateY = false }: { links: typeof n
                           </Link>
 
                           <ul
-                            className={`mn-sub to-right ${isDropdownOpen.includes(subLink.text) && "open"} !bg-extColorPrimary8`}
+                            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`}
                           >
                             {subLink.child.map((subLink2: any, subLinkIdx2: number) => (
                               <li key={subLinkIdx2}>
@@ -113,7 +118,7 @@ export default function HeaderNav({ links, animateY = false }: { links: typeof n
                     </li>
                   ))}
                 </ul>
-              </>
+              </div>
             )}
           </li>
           {index != links.length - 1 && (