fix(next): active nav item not clickable in edit view (#11457)

This fixes an issue where the active collection nav item was
non-clickable inside documents. Now, it remains clickable when viewing a
document, allowing users to return to the list view from the nav items
in the sidebar.

The active state indicator still appears in both cases.

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

@@ -44,17 +44,19 @@ export const DefaultNavClient: React.FC<{
                 id = `nav-global-${slug}`
               }
 
-              const activeCollection =
-                pathname.startsWith(href) && ['/', undefined].includes(pathname[href.length])
+              const isActive = pathname.startsWith(href)
 
               const Label = (
+                <>
+                  {isActive && <div className={`${baseClass}__link-indicator`} />}
                   <span className={`${baseClass}__link-label`}>{getTranslation(label, i18n)}</span>
+                </>
               )
 
-              if (activeCollection) {
+              // If the URL matches the link exactly
+              if (pathname === href) {
                 return (
-                  <div className={`${baseClass}__link active`} id={id} key={i}>
-                    <div className={`${baseClass}__link-indicator`} />
+                  <div className={`${baseClass}__link`} id={id} key={i}>
                     {Label}
                   </div>
                 )

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

@@ -121,6 +121,11 @@
       }
     }
 
+    &__link:has(.nav__link-indicator) {
+      font-weight: 600;
+      padding-left: 0;
+    }
+
     &__link-indicator {
       position: absolute;
       display: block;

test/admin/e2e/general/e2e.spec.ts

@@ -409,12 +409,21 @@ describe('General', () => {
     test('should disable active nav item', async () => {
       await page.goto(postsUrl.list)
       await openNav(page)
-      const activeItem = page.locator('.nav .nav__link.active')
+      const activeItem = page.locator('.nav .nav__link:has(.nav__link-indicator)')
       await expect(activeItem).toBeVisible()
       const tagName = await activeItem.evaluate((el) => el.tagName.toLowerCase())
       expect(tagName).toBe('div')
     })
 
+    test('should keep active nav item enabled in the edit view', async () => {
+      await page.goto(postsUrl.create)
+      await openNav(page)
+      const activeItem = page.locator('.nav .nav__link:has(.nav__link-indicator)')
+      await expect(activeItem).toBeVisible()
+      const tagName = await activeItem.evaluate((el) => el.tagName.toLowerCase())
+      expect(tagName).toBe('a')
+    })
+
     test('breadcrumbs — should navigate from list to dashboard', async () => {
       await page.goto(postsUrl.list)
       await page.locator(`.step-nav a[href="${adminRoutes.routes.admin}"]`).click()

test/admin/payload-types.ts

@@ -64,7 +64,6 @@ export interface Config {
   auth: {
     users: UserAuthOperations;
   };
-  blocks: {};
   collections: {
     uploads: Upload;
     posts: Post;