From 7f31d5606d3c9cf8bec69cba9fde16585bc9e493 Mon Sep 17 00:00:00 2001
From: Jordi Enric <jordi.err@gmail.com>
Date: Thu, 9 May 2024 12:09:57 +0200
Subject: [PATCH 1/3] fix

---
 .../components/layouts/OrganizationLayout.tsx   |  4 +++-
 apps/studio/hooks/misc/useCurrentPath.tsx       | 17 +++++++++++++++++
 2 files changed, 20 insertions(+), 1 deletion(-)
 create mode 100644 apps/studio/hooks/misc/useCurrentPath.tsx

diff --git a/apps/studio/components/layouts/OrganizationLayout.tsx b/apps/studio/components/layouts/OrganizationLayout.tsx
index c0f60b76f7bb3..aa4f37e712cc0 100644
--- a/apps/studio/components/layouts/OrganizationLayout.tsx
+++ b/apps/studio/components/layouts/OrganizationLayout.tsx
@@ -9,10 +9,12 @@ import { ScaffoldContainer, ScaffoldDivider, ScaffoldHeader, ScaffoldTitle } fro
 import SettingsLayout from './SettingsLayout/SettingsLayout'
 import Link from 'next/link'
 import { useOrgSubscriptionQuery } from '../../data/subscriptions/org-subscription-query'
+import { useCurrentPath } from 'hooks/misc/useCurrentPath'
 
 const OrganizationLayout = ({ children }: PropsWithChildren<{}>) => {
   const selectedOrganization = useSelectedOrganization()
   const router = useRouter()
+  const currentPath = useCurrentPath()
   const { slug } = useParams()
 
   const invoicesEnabledOnProfileLevel = useIsFeatureEnabled('billing:invoices')
@@ -80,7 +82,7 @@ const OrganizationLayout = ({ children }: PropsWithChildren<{}>) => {
         <ScaffoldContainer>
           <NavMenu className="border-none" aria-label="Organization menu navigation">
             {filteredNavMenuItems.map((item) => (
-              <NavMenuItem key={item.label} active={item.href === router.asPath}>
+              <NavMenuItem key={item.label} active={currentPath === item.href}>
                 <Link href={item.href}>{item.label}</Link>
               </NavMenuItem>
             ))}
diff --git a/apps/studio/hooks/misc/useCurrentPath.tsx b/apps/studio/hooks/misc/useCurrentPath.tsx
new file mode 100644
index 0000000000000..d401b08c05fa6
--- /dev/null
+++ b/apps/studio/hooks/misc/useCurrentPath.tsx
@@ -0,0 +1,17 @@
+import { useRouter } from 'next/router'
+
+type UseCurrentPathOptions = {
+  withQuery: boolean
+}
+export const useCurrentPath = (options?: UseCurrentPathOptions) => {
+  const router = useRouter()
+
+  if (!router.isReady) {
+    return ''
+  }
+
+  const pathWithQuery = router.asPath
+  const currentPath = pathWithQuery.split('?')[0]
+
+  return currentPath
+}

From 5011e5770eb54781db1db3cf55c8098fdf6108bc Mon Sep 17 00:00:00 2001
From: Jordi Enric <jordi.err@gmail.com>
Date: Tue, 28 May 2024 10:00:09 +0200
Subject: [PATCH 2/3] rm unused arg

---
 apps/studio/hooks/misc/useCurrentPath.tsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/apps/studio/hooks/misc/useCurrentPath.tsx b/apps/studio/hooks/misc/useCurrentPath.tsx
index d401b08c05fa6..300ba62df245c 100644
--- a/apps/studio/hooks/misc/useCurrentPath.tsx
+++ b/apps/studio/hooks/misc/useCurrentPath.tsx
@@ -1,9 +1,6 @@
 import { useRouter } from 'next/router'
 
-type UseCurrentPathOptions = {
-  withQuery: boolean
-}
-export const useCurrentPath = (options?: UseCurrentPathOptions) => {
+export const useCurrentPath = () => {
   const router = useRouter()
 
   if (!router.isReady) {

From 98edc214e9b8915058cc18d228c482d2e60ba7ad Mon Sep 17 00:00:00 2001
From: Jordi Enric <jordi.err@gmail.com>
Date: Tue, 28 May 2024 10:04:56 +0200
Subject: [PATCH 3/3] forwardRef NavMenuItem

---
 packages/ui/src/components/NavMenu/index.tsx | 42 ++++++++++----------
 1 file changed, 22 insertions(+), 20 deletions(-)

diff --git a/packages/ui/src/components/NavMenu/index.tsx b/packages/ui/src/components/NavMenu/index.tsx
index 7dc6c2a94524e..1b8b96cec39ab 100644
--- a/packages/ui/src/components/NavMenu/index.tsx
+++ b/packages/ui/src/components/NavMenu/index.tsx
@@ -18,24 +18,26 @@ export const NavMenu = forwardRef<HTMLDivElement, NavMenuProps>(
   }
 )
 
-export const NavMenuItem = ({
-  children,
-  className,
-  active,
-  ...props
-}: PropsWithChildren<{
-  className?: string
-  active: boolean
-}>) => (
-  <li
-    aria-selected={active ? 'true' : 'false'}
-    data-state={active ? 'active' : 'inactive'}
-    className={cn(
-      'inline-flex items-center justify-center whitespace-nowrap text-sm ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground text-foreground-lighter hover:text-foreground data-[state=active]:border-foreground border-b-2 border-transparent *:px-3 *:py-1.5',
-      className
-    )}
-    {...props}
-  >
-    {children}
-  </li>
+export const NavMenuItem = forwardRef(
+  ({
+    children,
+    className,
+    active,
+    ...props
+  }: PropsWithChildren<{
+    className?: string
+    active: boolean
+  }>) => (
+    <li
+      aria-selected={active ? 'true' : 'false'}
+      data-state={active ? 'active' : 'inactive'}
+      className={cn(
+        'inline-flex items-center justify-center whitespace-nowrap text-sm ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground text-foreground-lighter hover:text-foreground data-[state=active]:border-foreground border-b-2 border-transparent *:px-3 *:py-1.5',
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </li>
+  )
 )