From a604cdc468e3ccbfa9d1fe7ae661e23d336a3af1 Mon Sep 17 00:00:00 2001
From: Richard R <me@richardr.dev>
Date: Mon, 1 Jun 2026 15:54:56 -0600
Subject: [PATCH] feat(ui): convert SidebarNavLink to forwardRef component

Refactor SidebarNavLink to use React.forwardRef, enabling parent components
to access the underlying anchor element's ref. Update prop typing and
function signature accordingly for improved composability and integration
with higher-order components.
---
 src/components/ui/sidebar-nav.tsx | 27 ++++++++++++++-------------
 1 file changed, 14 insertions(+), 13 deletions(-)

diff --git a/src/components/ui/sidebar-nav.tsx b/src/components/ui/sidebar-nav.tsx
index dcf27eb..b556d96 100644
--- a/src/components/ui/sidebar-nav.tsx
+++ b/src/components/ui/sidebar-nav.tsx
@@ -1,4 +1,4 @@
-import type { AnchorHTMLAttributes, ButtonHTMLAttributes, HTMLAttributes, ReactNode } from 'react';
+import { forwardRef, type AnchorHTMLAttributes, type ButtonHTMLAttributes, type HTMLAttributes, type ReactNode } from 'react';
 import { cn } from './cn';
 import { focusRing, motionColors } from './tokens';
 
@@ -170,7 +170,16 @@ export function SidebarNavItem({
   );
 }
 
-export function SidebarNavLink({
+export const SidebarNavLink = forwardRef<HTMLAnchorElement, AnchorHTMLAttributes<HTMLAnchorElement> & {
+  active?: boolean;
+  icon?: ReactNode;
+  label?: ReactNode;
+  count?: number;
+  countClassName?: string;
+  trailing?: ReactNode;
+  isDropTarget?: boolean;
+  compact?: boolean;
+}>(function SidebarNavLink({
   active = false,
   icon,
   label,
@@ -182,18 +191,10 @@ export function SidebarNavLink({
   compact = false,
   children,
   ...props
-}: AnchorHTMLAttributes<HTMLAnchorElement> & {
-  active?: boolean;
-  icon?: ReactNode;
-  label?: ReactNode;
-  count?: number;
-  countClassName?: string;
-  trailing?: ReactNode;
-  isDropTarget?: boolean;
-  compact?: boolean;
-}) {
+}, ref) {
   return (
     <a
+      ref={ref}
       className={sidebarNavItemClass({ active, compact, isDropTarget, className })}
       {...props}
     >
@@ -210,4 +211,4 @@ export function SidebarNavLink({
       </SidebarNavItemContent>
     </a>
   );
-}
+});