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

feat(ui): convert SidebarNavLink to forwardRef component

Browse source 
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.
This commit is contained in:
Richard R 2026-06-01 15:54:56 -06:00
parent 432ace778c
commit a604cdc468
1 changed files with 14 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

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