fix: nav menu group hover problem

Author: sanyuan0704

src/theme-default/components/Nav/NavMenuGroup.tsx

@@ -2,7 +2,7 @@ import { DefaultTheme } from 'shared/types';
 import Down from './icons/down.svg';
 import Right from './icons/right.svg';
 import { Link } from '../Link/index';
-import styles from './index.module.scss';
+import { useState } from 'react';
 
 export interface NavMenuGroupItem {
   text?: string | React.ReactElement;
@@ -12,14 +12,16 @@ export interface NavMenuGroupItem {
 
 export function NavMenuGroup(item: NavMenuGroupItem) {
   const { activeIndex } = item;
+
   return (
-    <div relative="" className={`${styles.menuGroup} pointer-events-auto`}>
+    <div relative="" className="nav-menu-group">
       <button
         flex="center"
         nav-h="mobile sm:desktop"
         font="medium"
         text="sm text-1 hover:text-2"
         transition="color duration-200"
+        className="nav-menu-group-button"
       >
         <span mr="1" text="sm" font="medium">
           {item.text}
@@ -32,7 +34,7 @@ export function NavMenuGroup(item: NavMenuGroupItem) {
         m="x-0.8"
         opacity="0"
         transition="opacity duration-300"
-        className={styles.menuGroupContent}
+        className="nav-menu-group-content"
       >
         <div
           p="3"

src/theme-default/components/Nav/index.module.scss

@@ -55,9 +55,3 @@
 .container :deep(*) {
   pointer-events: all;
 }
-
-.menu-group:hover {
-  & .menu-group-content {
-    opacity: 1;
-  }
-}

src/theme-default/logic/sideEffects.ts

@@ -200,6 +200,29 @@ export function bindingAsideScroll() {
   };
 }
 
+function bindingMenuGroupToggle() {
+  const menuGroups = document.getElementsByClassName('nav-menu-group');
+
+  Array.from(menuGroups).forEach((menuGroup) => {
+    const menuButton = menuGroup.getElementsByClassName(
+      'nav-menu-group-button'
+    )[0] as HTMLButtonElement;
+    const menuContent = menuGroup.getElementsByClassName(
+      'nav-menu-group-content'
+    )[0] as HTMLDivElement;
+    menuButton.addEventListener('mouseenter', () => {
+      console.log(111);
+
+      menuContent.style.opacity = '1';
+      menuContent.style.visibility = 'visible';
+    });
+    menuGroup.addEventListener('mouseleave', () => {
+      menuContent.style.opacity = '0';
+      menuContent.style.visibility = 'hidden';
+    });
+  });
+}
+
 export function setupEffects() {
   if (!inBrowser()) {
     return;
@@ -210,5 +233,6 @@ export function setupEffects() {
     bindingAsideScroll();
   }
   bindingWindowScroll();
+  bindingMenuGroupToggle();
   setupCopyCodeButton();
 }