fix(next): disables active nav item (#11434)

When visiting a collection's list view, the nav item corresponding to
that collection correctly appears in an active state, but is still
rendered as an anchor tag. This makes it possible to reload the current
page by simply clicking the link, which is a problem because this
performs an unnecessary server roundtrip. This is especially apparent
when search params exist in the current URL, as the href on the link
does not.

Unrelated: also cleans up leftover code that was missed in this PR:
#11155

packages/next/src/elements/Nav/index.client.tsx

@@ -44,23 +44,26 @@ export const DefaultNavClient: React.FC<{
                 id = `nav-global-${slug}`
               }
 
-              const LinkElement = Link || 'a'
               const activeCollection =
                 pathname.startsWith(href) && ['/', undefined].includes(pathname[href.length])
 
+              const Label = (
+                <span className={`${baseClass}__link-label`}>{getTranslation(label, i18n)}</span>
+              )
+
+              if (activeCollection) {
+                return (
+                  <div className={`${baseClass}__link active`} id={id} key={i}>
+                    <div className={`${baseClass}__link-indicator`} />
+                    {Label}
+                  </div>
+                )
+              }
+
               return (
-                <LinkElement
-                  className={[`${baseClass}__link`, activeCollection && `active`]
-                    .filter(Boolean)
-                    .join(' ')}
-                  href={href}
-                  id={id}
-                  key={i}
-                  prefetch={Link ? false : undefined}
-                >
-                  {activeCollection && <div className={`${baseClass}__link-indicator`} />}
-                  <span className={`${baseClass}__link-label`}>{getTranslation(label, i18n)}</span>
-                </LinkElement>
+                <Link className={`${baseClass}__link`} href={href} id={id} key={i} prefetch={false}>
+                  {Label}
+                </Link>
               )
             })}
           </NavGroup>

packages/next/src/elements/Nav/index.scss

@@ -93,36 +93,32 @@
       }
     }
 
-    nav {
-      a {
-        position: relative;
-        padding-block: base(0.125);
-        padding-inline-start: 0;
-        padding-inline-end: base(1.5);
-        display: flex;
-        text-decoration: none;
-
-        &:focus:not(:focus-visible) {
-          box-shadow: none;
-          font-weight: 600;
-        }
-
-        &:hover,
-        &:focus-visible {
-          text-decoration: underline;
-        }
-
-        &.active {
-          font-weight: normal;
-          padding-left: 0;
-          font-weight: 600;
-        }
-      }
-    }
-
     &__link {
       display: flex;
       align-items: center;
+      position: relative;
+      padding-block: base(0.125);
+      padding-inline-start: 0;
+      padding-inline-end: base(1.5);
+      text-decoration: none;
+
+      &:focus:not(:focus-visible) {
+        box-shadow: none;
+        font-weight: 600;
+      }
+
+      &.active {
+        font-weight: normal;
+        padding-left: 0;
+        font-weight: 600;
+      }
+    }
+
+    a.nav__link {
+      &:hover,
+      &:focus-visible {
+        text-decoration: underline;
+      }
     }
 
     &__link-indicator {
@@ -148,7 +144,7 @@
         padding: var(--app-header-height) var(--gutter-h) base(2);
       }
 
-      nav a {
+      &__link {
         font-size: base(0.875);
         line-height: base(1.5);
       }