fix hovering effects

Author: Blargian

src/components/DocsCategoryDropdown/index.jsx

@@ -143,24 +143,23 @@ const DropdownContent = ({
           className={`${styles.docsNavDropdownMenu} ${isVisible ? styles.visible : ''}`}
           style={{ position: "fixed", ...dropdownStyles }}
       >
-        <div
+        <Link
             key={99}
+            to={dropdownCategory.customProps.href}
             className={`${styles.docsNavMenuItem} ${hovered === 99 ? styles.docsNavHovered : ""}`}
             onMouseEnter={() => setHovered(99)}
             onMouseLeave={() => setHovered(null)}
+            onClick={handleMouseLeave}
+            style={{ textDecoration: 'none', display: 'block' }}
         >
-          <Link
-              to={dropdownCategory.customProps.href}
-              className={styles.docsNavMenuHeader}
-              onClick={handleMouseLeave}
-          >
+          <div className={styles.docsNavMenuHeader}>
             <Translate
                 id={`sidebar.dropdownCategories.category.${dropdownCategory.label}`}
                 description={`Translation for ${dropdownCategory.label}`}
             >
               {dropdownCategory.label}
             </Translate>
-          </Link>
+          </div>
           <div className={styles.docsNavMenuDescription}>
             <Translate
                 id={`sidebar.dropdownCategories.category.description.${dropdownCategory.label}`}
@@ -169,39 +168,36 @@ const DropdownContent = ({
               {dropdownCategory.description}
             </Translate>
           </div>
-        </div>
+        </Link>
         <hr className={styles.docsNavMenuDivider} />
         <div className={styles.docsNavMenuItems}>
           {dropdownCategory.items.map((item, index) => (
-              <div
+              <Link
                   key={index}
+                  to={item.href}
                   className={`${styles.docsNavMenuItem} ${hovered === index ? styles.docsNavHovered : ""}`}
                   onMouseEnter={() => setHovered(index)}
                   onMouseLeave={() => setHovered(null)}
+                  onClick={handleMouseLeave}
+                  style={{ textDecoration: 'none', display: 'block' }}
               >
-                <Link
-                    to={item.href}
-                    className={styles.docsNavItemTitle}
-                    onClick={handleMouseLeave}
-                >
+                <div className={styles.docsNavItemTitle}>
                   <Translate
                       id={`sidebar.dropdownCategories.category.${dropdownCategory.label}.${item.label}`}
                       description={`Translation for ${dropdownCategory.label}.${item.label}`}
                   >
                     {item.label}
                   </Translate>
-
-                </Link>
+                </div>
                 <div className={styles.docsNavItemDescription}>
                   <Translate
                       id={`sidebar.dropdownCategories.category.${dropdownCategory.label}.${item.label}.description`}
                       description={`Translation for ${dropdownCategory.label}.${item.label} description`}
                   >
                     {item.description}
                   </Translate>
-
                 </div>
-              </div>
+              </Link>
           ))}
         </div>
       </div>

src/components/DocsCategoryDropdown/styles.module.css

@@ -24,6 +24,12 @@
   }
 }
 
+.docsNavDropdownContainer .docsNavDropdownToolbarTopLevelLink {
+  margin: -8px;
+  padding: 8px;
+  display: inline-block;
+}
+
 [data-theme="dark"] .docsNavDropdownContainer:hover .docsNavDropdownToolbarLink,
 [data-theme="dark"] .docsNavDropdownContainer:hover .docsNavDropdownToolbarTopLevelLink {
   color: #FAFF69 !important;