Function SideNavLink

packages/dev/s2-docs/src/Nav.tsx:280–349

(props)

}

export function SideNavLink(props) {
  let linkRef = useRef<HTMLAnchorElement | null>(null);
  let shouldAutoScrollOnMount = useRef(props.isSelected);
  let selected = useContext(SideNavContext);
  let {isExternal, ...linkProps} = props;

  useEffect(() => {
    let link = linkRef.current;
    if (!link || !props.isSelected || !shouldAutoScrollOnMount.current) {
      return;
    }

    shouldAutoScrollOnMount.current = false;
    link.scrollIntoView({block: 'start'});
  }, [props.isSelected]);

  return (
    <BaseLink
      {...linkProps}
      ref={linkRef}
      target={isExternal ? '_blank' : undefined}
      rel={isExternal ? 'noopener noreferrer' : undefined}
      aria-current={props.isSelected || selected === props.href ? 'page' : undefined}
      style={pressScale(linkRef)}
      className={style({
        ...focusRing(),
        minHeight: 32,
        boxSizing: 'border-box',
        paddingX: 4,
        // paddingY: centerPadding(),
        display: 'flex',
        alignItems: 'center',
        gap: size(6),
        font: 'ui',
        fontWeight: {
          default: 'normal',
          isCurrent: 'bold'
        },
        textDecoration: 'none',
        borderRadius: 'default',
        transition: 'default',
        scrollMarginTop: 64
      })}>
      {renderProps => (
        <>
          <span
            className={style({
              width: 2,
              height: '[1lh]',
              borderRadius: 'full',
              transition: 'default',
              backgroundColor: {
                default: 'transparent',
                isHovered: 'gray-400',
                isCurrent: 'gray-800'
              }
            })(renderProps)}
          />