From 83b4548fc1c5f914118936f97dd9ce29d4da5bf5 Mon Sep 17 00:00:00 2001
From: Patrik <patrik@payloadcms.com>
Date: Fri, 28 Feb 2025 15:14:21 -0500
Subject: [PATCH] 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 | 14 ++++++++------
 packages/next/src/elements/Nav/index.scss       |  5 +++++
 test/admin/e2e/general/e2e.spec.ts              | 11 ++++++++++-
 test/admin/payload-types.ts                     |  1 -
 4 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/packages/next/src/elements/Nav/index.client.tsx b/packages/next/src/elements/Nav/index.client.tsx
index 1bb703545..cdc357758 100644
--- a/packages/next/src/elements/Nav/index.client.tsx
+++ b/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 = (
-                <span className={`${baseClass}__link-label`}>{getTranslation(label, i18n)}</span>
+                <>
+                  {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>
                 )
diff --git a/packages/next/src/elements/Nav/index.scss b/packages/next/src/elements/Nav/index.scss
index 636b6b103..76ce29f56 100644
--- a/packages/next/src/elements/Nav/index.scss
+++ b/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;
diff --git a/test/admin/e2e/general/e2e.spec.ts b/test/admin/e2e/general/e2e.spec.ts
index 6c84a828c..e62eb9868 100644
--- a/test/admin/e2e/general/e2e.spec.ts
+++ b/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()
diff --git a/test/admin/payload-types.ts b/test/admin/payload-types.ts
index 08f3e7a75..639d13eac 100644
--- a/test/admin/payload-types.ts
+++ b/test/admin/payload-types.ts
@@ -64,7 +64,6 @@ export interface Config {
   auth: {
     users: UserAuthOperations;
   };
-  blocks: {};
   collections: {
     uploads: Upload;
     posts: Post;