fix(v2): fix HTML issues nav dropdown and highlight docs item (#2489)

packages/docusaurus-theme-classic/src/theme/Navbar/index.js

@@ -64,11 +64,9 @@ function NavItem({items, position, ...props}) {
       </NavLink>
       <ul className="dropdown__menu">
         {items.map((linkItemInner, i) => (
-          <NavLink
+          <li key={i}>
-            className="navbar__item navbar__link"
+            <NavLink className="navbar__item navbar__link" {...linkItemInner} />
-            {...linkItemInner}
+          </li>
-            key={i}
-          />
         ))}
       </ul>
     </div>
@@ -91,8 +89,8 @@ function MobileNavItem({items, ...props}) {
       </NavLink>
       <ul className="menu__list">
         {items.map((linkItemInner, i) => (
-          <li className="menu__list-item">
+          <li className="menu__list-item" key={i}>
-            <NavLink className="menu__link" {...linkItemInner} key={i} />
+            <NavLink className="menu__link" {...linkItemInner} />
           </li>
         ))}
       </ul>

website/docusaurus.config.js

@@ -92,12 +92,13 @@ module.exports = {
       links: [
         {
           label: 'Docs',
+          to: 'docs/introduction', // "fake" link
           position: 'left',
           activeBasePath: 'docs',
           items: [
             {
               label: versions[0],
-              to: `docs/introduction`,
+              to: 'docs/introduction',
             },
           ].concat(
             versions.slice(1).map(version => ({

website/src/css/custom.css

@@ -30,3 +30,8 @@ html[data-theme='dark'] {
 html[data-theme='dark'] .docusaurus-highlight-code-line {
   background-color: rgb(0, 0, 0, 0.3);
 }
+
+/* This will be removed after new release of Infima */
+.navbar__item.dropdown > .navbar__link {
+  pointer-events: none;
+}