From 0e3ca3b15b83179212831e99be97ea97af990e2d Mon Sep 17 00:00:00 2001
From: adriangohjw <adriangohjw@gmail.com>
Date: Sun, 29 Dec 2024 13:22:05 +0800
Subject: [PATCH 1/3] chore - do not wrap link text in span

---
 apps/studio/public/assets/css/preview-tw.css      | 15 ---------------
 .../next/components/internal/Navbar/NavItem.tsx   |  4 ++--
 2 files changed, 2 insertions(+), 17 deletions(-)

diff --git a/apps/studio/public/assets/css/preview-tw.css b/apps/studio/public/assets/css/preview-tw.css
index ca673a2f7d..9033bdc0cd 100644
--- a/apps/studio/public/assets/css/preview-tw.css
+++ b/apps/studio/public/assets/css/preview-tw.css
@@ -1418,10 +1418,6 @@ video {
   -webkit-line-clamp: 3;
 }
 
-.\!block {
-  display: block !important;
-}
-
 .block {
   display: block;
 }
@@ -3156,11 +3152,6 @@ video {
   color: rgb(26 86 229 / var(--tw-text-opacity));
 }
 
-.text-link-hover {
-  --tw-text-opacity: 1;
-  color: rgb(21 71 190 / var(--tw-text-opacity));
-}
-
 .text-site-secondary {
   --tw-text-opacity: 1;
   color: rgb(78 69 65 / var(--tw-text-opacity));
@@ -5510,12 +5501,6 @@ video {
   margin-top: 2.25rem;
 }
 
-.\[\&\:not\(\:first-child\)\]\:first-of-type\:mt-7:first-of-type:not(
-    :first-child
-  ) {
-  margin-top: 1.75rem;
-}
-
 .\[\&\:not\(\:last-child\)\]\:mb-0:not(:last-child) {
   margin-bottom: 0px;
 }
diff --git a/packages/components/src/templates/next/components/internal/Navbar/NavItem.tsx b/packages/components/src/templates/next/components/internal/Navbar/NavItem.tsx
index 3a4575b51a..999d70f2ac 100644
--- a/packages/components/src/templates/next/components/internal/Navbar/NavItem.tsx
+++ b/packages/components/src/templates/next/components/internal/Navbar/NavItem.tsx
@@ -64,9 +64,9 @@ export const NavItem = forwardRef<HTMLButtonElement, NavbarItemProps>(
             isExternal={isExternalUrl(url)}
             showExternalIcon={isExternalUrl(url)}
             href={referenceLinkHref}
-            className={item({ isOpen })}
+            className={`${item({ isOpen })} ${groupFocusVisibleHighlight()}`}
           >
-            <span className={groupFocusVisibleHighlight()}>{name}</span>
+            {name}
           </Link>
         </li>
       )

From f8df2003d5173fd734f297658a2313a055ab5d00 Mon Sep 17 00:00:00 2001
From: adriangohjw <adriangohjw@gmail.com>
Date: Fri, 3 Jan 2025 13:11:22 +0800
Subject: [PATCH 2/3] replace with focusVisibleHighlight

---
 .../templates/next/components/internal/Navbar/NavItem.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/templates/next/components/internal/Navbar/NavItem.tsx b/packages/components/src/templates/next/components/internal/Navbar/NavItem.tsx
index 999d70f2ac..bc0ba49fb7 100644
--- a/packages/components/src/templates/next/components/internal/Navbar/NavItem.tsx
+++ b/packages/components/src/templates/next/components/internal/Navbar/NavItem.tsx
@@ -10,7 +10,11 @@ import type {
   NavbarProps,
 } from "~/interfaces/internal/Navbar"
 import { tv } from "~/lib/tv"
-import { groupFocusVisibleHighlight, isExternalUrl } from "~/utils"
+import {
+  focusVisibleHighlight,
+  groupFocusVisibleHighlight,
+  isExternalUrl,
+} from "~/utils"
 import { IconButton } from "../IconButton"
 import { Link } from "../Link"
 
@@ -64,7 +68,7 @@ export const NavItem = forwardRef<HTMLButtonElement, NavbarItemProps>(
             isExternal={isExternalUrl(url)}
             showExternalIcon={isExternalUrl(url)}
             href={referenceLinkHref}
-            className={`${item({ isOpen })} ${groupFocusVisibleHighlight()}`}
+            className={`${item({ isOpen })} ${focusVisibleHighlight()}`}
           >
             {name}
           </Link>

From 8a202db5d390ca7c6bde18fd8f2ef601d55781e2 Mon Sep 17 00:00:00 2001
From: adriangohjw <adriangohjw@gmail.com>
Date: Fri, 3 Jan 2025 13:13:27 +0800
Subject: [PATCH 3/3] fix focus

---
 .../src/templates/next/components/internal/Navbar/NavItem.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/templates/next/components/internal/Navbar/NavItem.tsx b/packages/components/src/templates/next/components/internal/Navbar/NavItem.tsx
index bc0ba49fb7..fe13b1f00a 100644
--- a/packages/components/src/templates/next/components/internal/Navbar/NavItem.tsx
+++ b/packages/components/src/templates/next/components/internal/Navbar/NavItem.tsx
@@ -62,13 +62,13 @@ export const NavItem = forwardRef<HTMLButtonElement, NavbarItemProps>(
   ): JSX.Element => {
     if (!items || items.length === 0) {
       return (
-        <li>
+        <li className={item({ isOpen })}>
           <Link
             LinkComponent={LinkComponent}
             isExternal={isExternalUrl(url)}
             showExternalIcon={isExternalUrl(url)}
             href={referenceLinkHref}
-            className={`${item({ isOpen })} ${focusVisibleHighlight()}`}
+            className={focusVisibleHighlight()}
           >
             {name}
           </Link>