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

An implementation of GitHub's Primer Design System using React

import styled, { css } from 'styled-components';
import Box from './Box/Box.js';
import Link from './Link/Link.js';
import React from 'react';
import { clsx } from 'clsx';
import sx from './sx.js';
import { toggleStyledComponent } from './internal/utils/toggleStyledComponent.js';
import classes from './SideNav.module.css.js';
import './FeatureFlags/FeatureFlags.js';
import { useFeatureFlag } from './FeatureFlags/useFeatureFlag.js';
import './FeatureFlags/DefaultFeatureFlags.js';

function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_staff';
const StyledNav = toggleStyledComponent(CSS_MODULES_FEATURE_FLAG, 'nav', styled(Box).withConfig({
  displayName: "SideNav__StyledNav",
  componentId: "sc-11f1jdr-0"
})(["background-color:var(--bgColor-muted);", " ", ";"], props => props.bordered && css(["border-color:var(--borderColor-default);border-style:solid;border-width:var(--borderWidth-thin);border-radius:var(--borderRadius-medium);& > &{border-left:0;border-right:0;border-bottom:0;}"]), sx));
function SideNav({
  as = 'nav',
  variant = 'normal',
  className,
  bordered,
  children,
  'aria-label': ariaLabel,
  sx: sxProp
}) {
  const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG);
  const variantClassName = variant === 'lightweight' ? 'lightweight' : 'normal';
  const newClassName = clsx({
    [classes.SideNav]: enabled,
    [classes.SideNavBordered]: enabled && bordered,
    [classes[`SideNavVariant-${variantClassName}`]]: enabled,
    sidenav: !enabled,
    [`variant-${variantClassName}`]: !enabled
  }, className);
  return /*#__PURE__*/React.createElement(StyledNav, {
    as: as,
    bordered: enabled ? undefined : bordered,
    className: newClassName,
    "aria-label": ariaLabel,
    sx: sxProp
  }, children);
}
SideNav.displayName = "SideNav";
// used for variant normal hover, focus pseudo selectors
const CommonAccessibilityVariantNormalStyles = css(["background-color:var(--bgColor-neutral-muted);text-decoration:none;"]);

// used for light weight hover, focus pseudo selectors
const CommonAccessibilityVariantLightWeightStyles = css(["color:var(--fgColor-default);text-decoration:none;"]);
const StyledSideNavLink = toggleStyledComponent(CSS_MODULES_FEATURE_FLAG, Link, styled(Link).withConfig({
  displayName: "SideNav__StyledSideNavLink",
  componentId: "sc-11f1jdr-1"
})(["position:relative;display:block;width:100%;font-size:14px;text-align:left;text-decoration:none;", " & > .sidenav{border-bottom:none;}.sidenav.variant-normal > &{color:var(--fgColor-default);padding:var(--base-size-16);border:0;border-top:var(--borderWidth-thin) solid var(--borderColor-muted);&:first-child{border-top:0;border-top-right-radius:var(--borderRadius-medium);border-top-left-radius:var(--borderRadius-medium);}&:last-child{border-bottom-right-radius:var(--borderRadius-medium);border-bottom-left-radius:var(--borderRadius-medium);}&::before{position:absolute;top:0;bottom:0;left:0;z-index:1;width:3px;pointer-events:none;content:'';}&:hover{", "}&:focus{", " outline:solid 2px var(--fgColor-accent);z-index:1;}&[aria-current='page'],&[aria-selected='true']{background-color:var(--bgColor-default);&::before{background-color:var(--underlineNav-borderColor-active,var(--color-primer-border-active,#fd8c73));}}}.sidenav.variant-lightweight > &{padding:var(--base-size-4) 0;color:var(--fgColor-accent);&:hover{", "}&:focus{", " outline:solid 1px var(--fgColor-accent);z-index:1;}&[aria-current='page'],&[aria-selected='true']{color:var(--fgColor-default);font-weight:var(--base-text-weight-medium);}}", ";"], props => props.variant === 'full' && css(["display:flex;align-items:center;justify-content:space-between;"]), CommonAccessibilityVariantNormalStyles, CommonAccessibilityVariantNormalStyles, CommonAccessibilityVariantLightWeightStyles, CommonAccessibilityVariantLightWeightStyles, sx));
const SideNavLink = ({
  selected,
  to,
  variant,
  className,
  children,
  ...rest
}) => {
  const isReactRouter = typeof to === 'string';
  const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG);
  const newClassName = clsx({
    [classes.SideNavLink]: true,
    [classes.SideNavLinkFull]: enabled && variant === 'full'
  }, className);

  // according to their docs, NavLink supports aria-current:
  // https://reacttraining.com/react-router/web/api/NavLink/aria-current-string
  return /*#__PURE__*/React.createElement(StyledSideNavLink, _extends({
    "aria-current": isReactRouter || selected ? 'page' : undefined,
    className: newClassName,
    variant: variant
  }, rest), 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 };