@pantheon-systems/design-toolkit-react/dist/Navigations/GlobalSecondary.js

Pantheon's React Design Toolkit

import { faArrowLeftToLine, faArrowRightToLine } from '@fortawesome/pro-solid-svg-icons';
import Tippy from '@tippyjs/react';
import PropTypes from 'prop-types';
import { useSpring, animated } from 'react-spring';
import Icon from '../Icons/Icon.js';
import { jsxs, jsx } from 'react/jsx-runtime';

var GlobalSecondary = function GlobalSecondary(_ref) {
  var ariaLabel = _ref.ariaLabel,
    children = _ref.children,
    className = _ref.className,
    isOpen = _ref.isOpen,
    setIsOpen = _ref.setIsOpen;
  var _useSpring = useSpring({
      opacity: isOpen ? '1' : '0',
      width: isOpen ? '10.25rem' : '1rem',
      config: {
        mass: 1,
        tension: 210,
        friction: 20,
        clamp: true // Whether it should ever overshoot the transitions.
      }
    }),
    opacity = _useSpring.opacity,
    width = _useSpring.width;
  var label = isOpen ? 'Collapse' : 'Expand';
  return /*#__PURE__*/jsxs(animated.div, {
    className: "flex relative bg-gray-1 z-navigationToggle ".concat(className),
    style: {
      width: width
    },
    children: [/*#__PURE__*/jsx("div", {
      className: "z-1 absolute -right-4 top-16",
      children: /*#__PURE__*/jsx(Tippy, {
        animation: "fade",
        arrow: true,
        content: label,
        interactive: true,
        placement: "bottom",
        children: /*#__PURE__*/jsx("button", {
          "aria-label": label,
          className: "bg-gray-5 h-10 w-10 rounded-full p-0 border-0",
          onClick: function onClick() {
            return setIsOpen(!isOpen);
          },
          type: "button",
          children: /*#__PURE__*/jsx(Icon, {
            className: "text-white",
            icon: isOpen ? faArrowLeftToLine : faArrowRightToLine,
            size: "lg"
          })
        })
      })
    }), /*#__PURE__*/jsx(animated.nav, {
      "aria-label": ariaLabel,
      className: "global-secondary-navigation-container flex flex-col h-screen overflow-x-hidden overflow-y-auto text-center",
      style: {
        opacity: opacity
      },
      children: /*#__PURE__*/jsx("div", {
        className: "global-secondary-navigation-list",
        children: children
      })
    })]
  });
};
GlobalSecondary.defaultProps = {
  className: '',
  isOpen: true
};
GlobalSecondary.propTypes = {
  /**
   * ARIA label for the overall navigation
   */
  ariaLabel: PropTypes.string.isRequired,
  children: PropTypes.node.isRequired,
  /**
   * Any custom CSS classes to add to the navigation
   */
  className: PropTypes.string,
  /**
   * Set open state
   */
  isOpen: PropTypes.bool,
  /**
   * Set function that will control open state
   */
  setIsOpen: PropTypes.func.isRequired
};
var GlobalSecondary$1 = GlobalSecondary;

export { GlobalSecondary$1 as default };
//# sourceMappingURL=GlobalSecondary.js.map