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

@@ -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>
       );

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>
   );
 });