danvics/openreader
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor(ui): replace anchor tags with next/link in SidebarNavLink and UserMenu

Browse source 
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.
This commit is contained in:
Richard R 2026-06-02 21:40:31 -06:00
parent 6f89307af4
commit cb430d5db0
2 changed files with 17 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
src/components/auth/UserMenu.tsx
View file

@ -1,6 +1,5 @@
'use client'; 'use client';
import Link from 'next/link';
import { useAuthConfig } from '@/contexts/AuthRateLimitContext'; import { useAuthConfig } from '@/contexts/AuthRateLimitContext';
import { useFeatureFlag } from '@/contexts/RuntimeConfigContext'; import { useFeatureFlag } from '@/contexts/RuntimeConfigContext';
import { useAuthSession } from '@/hooks/useAuthSession'; import { useAuthSession } from '@/hooks/useAuthSession';
@ -35,21 +34,19 @@ export function UserMenu({
if (variant === 'sidebar') { if (variant === 'sidebar') {
return ( return (
<div className={`flex w-full flex-col gap-0.5 ${className}`}> <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 <SidebarNavLink
href="/signup"
compact compact
icon={<UserIcon className="h-3.5 w-3.5" />} 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> </div>
); );

13
src/components/ui/sidebar-nav.tsx
View file

@ -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 { cn } from './cn';
import { focusRing, motionColors } from './tokens'; 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; active?: boolean;
icon?: ReactNode; icon?: ReactNode;
label?: ReactNode; label?: ReactNode;
@ -179,7 +180,9 @@ export const SidebarNavLink = forwardRef<HTMLAnchorElement, AnchorHTMLAttributes
trailing?: ReactNode; trailing?: ReactNode;
isDropTarget?: boolean; isDropTarget?: boolean;
compact?: boolean; compact?: boolean;
}>(function SidebarNavLink({ };
export const SidebarNavLink = forwardRef<HTMLAnchorElement, SidebarNavLinkProps>(function SidebarNavLink({
active = false, active = false,
icon, icon,
label, label,
@ -193,7 +196,7 @@ export const SidebarNavLink = forwardRef<HTMLAnchorElement, AnchorHTMLAttributes
...props ...props
}, ref) { }, ref) {
return ( return (
<a <Link
ref={ref} ref={ref}
className={sidebarNavItemClass({ active, compact, isDropTarget, className })} className={sidebarNavItemClass({ active, compact, isDropTarget, className })}
{...props} {...props}
@ -209,6 +212,6 @@ export const SidebarNavLink = forwardRef<HTMLAnchorElement, AnchorHTMLAttributes
> >
{children} {children}
</SidebarNavItemContent> </SidebarNavItemContent>
</a> </Link>
); );
}); });