From cb430d5db0d26fcc31cb7a42db5beeaf55319455 Mon Sep 17 00:00:00 2001
From: Richard R <me@richardr.dev>
Date: Tue, 2 Jun 2026 21:40:31 -0600
Subject: [PATCH] refactor(ui): replace anchor tags with next/link in
 SidebarNavLink and UserMenu

Update SidebarNavLink to use next/link for navigation instead of anchor tags,
ensuring proper routing and improved accessibility in Next.js. Refactor UserMenu
to remove legacy Link wrappers and directly use SidebarNavLink for signin and
signup links. This streamlines navigation components and aligns with Next.js
best practices.
---
 src/components/auth/UserMenu.tsx  | 21 +++++++++------------
 src/components/ui/sidebar-nav.tsx | 13 ++++++++-----
 2 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/src/components/auth/UserMenu.tsx b/src/components/auth/UserMenu.tsx
index d9e44ea..6f31aa5 100644
--- a/src/components/auth/UserMenu.tsx
+++ b/src/components/auth/UserMenu.tsx
@@ -1,6 +1,5 @@
 'use client';
 
-import Link from 'next/link';
 import { useAuthConfig } from '@/contexts/AuthRateLimitContext';
 import { useFeatureFlag } from '@/contexts/RuntimeConfigContext';
 import { useAuthSession } from '@/hooks/useAuthSession';
@@ -35,21 +34,19 @@ export function UserMenu({
     if (variant === 'sidebar') {
       return (
         <div className={`flex w-full flex-col gap-0.5 ${className}`}>
-          <Link href="/signin" legacyBehavior passHref>
+          <SidebarNavLink
+            href="/signin"
+            compact
+            icon={<UserIcon className="h-3.5 w-3.5" />}
+            label="Connect"
+          />
+          {enableUserSignups && (
             <SidebarNavLink
+              href="/signup"
               compact
               icon={<UserIcon className="h-3.5 w-3.5" />}
-              label="Connect"
+              label="Create account"
             />
-          </Link>
-          {enableUserSignups && (
-            <Link href="/signup" legacyBehavior passHref>
-              <SidebarNavLink
-                compact
-                icon={<UserIcon className="h-3.5 w-3.5" />}
-                label="Create account"
-              />
-            </Link>
           )}
         </div>
       );
diff --git a/src/components/ui/sidebar-nav.tsx b/src/components/ui/sidebar-nav.tsx
index b556d96..9ff0da7 100644
--- a/src/components/ui/sidebar-nav.tsx
+++ b/src/components/ui/sidebar-nav.tsx
@@ -1,4 +1,5 @@
-import { forwardRef, type AnchorHTMLAttributes, type ButtonHTMLAttributes, type HTMLAttributes, type ReactNode } from 'react';
+import Link from 'next/link';
+import { forwardRef, type ButtonHTMLAttributes, type ComponentPropsWithoutRef, type HTMLAttributes, type ReactNode } from 'react';
 import { cn } from './cn';
 import { focusRing, motionColors } from './tokens';
 
@@ -170,7 +171,7 @@ export function SidebarNavItem({
   );
 }
 
-export const SidebarNavLink = forwardRef<HTMLAnchorElement, AnchorHTMLAttributes<HTMLAnchorElement> & {
+type SidebarNavLinkProps = ComponentPropsWithoutRef<typeof Link> & {
   active?: boolean;
   icon?: ReactNode;
   label?: ReactNode;
@@ -179,7 +180,9 @@ export const SidebarNavLink = forwardRef<HTMLAnchorElement, AnchorHTMLAttributes
   trailing?: ReactNode;
   isDropTarget?: boolean;
   compact?: boolean;
-}>(function SidebarNavLink({
+};
+
+export const SidebarNavLink = forwardRef<HTMLAnchorElement, SidebarNavLinkProps>(function SidebarNavLink({
   active = false,
   icon,
   label,
@@ -193,7 +196,7 @@ export const SidebarNavLink = forwardRef<HTMLAnchorElement, AnchorHTMLAttributes
   ...props
 }, ref) {
   return (
-    <a
+    <Link
       ref={ref}
       className={sidebarNavItemClass({ active, compact, isDropTarget, className })}
       {...props}
@@ -209,6 +212,6 @@ export const SidebarNavLink = forwardRef<HTMLAnchorElement, AnchorHTMLAttributes
       >
         {children}
       </SidebarNavItemContent>
-    </a>
+    </Link>
   );
 });