@primer/react/lib-esm/SideNav.js

An implementation of GitHub's Primer Design System using React

import { clsx } from 'clsx';
import classes from './SideNav.module.css.js';
import { BoxWithFallback } from './internal/components/BoxWithFallback.js';
import { jsx } from 'react/jsx-runtime';
import Link from './Link/Link.js';

function SideNav({
  as = 'nav',
  variant = 'normal',
  className,
  bordered,
  children,
  'aria-label': ariaLabel,
  sx: sxProp
}) {
  const variantClassName = variant === 'lightweight' ? 'lightweight' : 'normal';
  const newClassName = clsx(classes.SideNav, classes[`SideNavVariant--${variantClassName}`], 'sidenav', `variant-${variantClassName}`, className, {
    [classes.SideNavBordered]: bordered
  });
  return /*#__PURE__*/jsx(BoxWithFallback, {
    as: as,
    className: newClassName,
    "aria-label": ariaLabel,
    sx: sxProp,
    children: children
  });
}
SideNav.displayName = "SideNav";
const SideNavLink = ({
  selected,
  to,
  variant,
  className,
  children,
  ...rest
}) => {
  const isReactRouter = typeof to === 'string';
  const newClassName = clsx(classes.SideNavLink, className, {
    [classes.SideNavLinkFull]: variant === 'full'
  });
  // according to their docs, NavLink supports aria-current:
  // https://reacttraining.com/react-router/web/api/NavLink/aria-current-string
  return /*#__PURE__*/jsx(BoxWithFallback, {
    as: Link,
    "aria-current": isReactRouter || selected ? 'page' : undefined,
    className: newClassName,
    variant: variant,
    ...rest,
    children: children
  });
};
SideNavLink.displayName = "SideNavLink";
SideNavLink.displayName = 'SideNav.Link';
/** @deprecated Use [NavList](https://primer.style/react/NavList) instead */
var SideNav$1 = Object.assign(SideNav, {
  Link: SideNavLink
});

export { SideNav$1 as default };