saagie-ui/src/react/core/layout/secondLevelNav/SecondLevelNav.js

Saagie UI from Saagie Design System

import React from 'react';
import PropTypes from 'prop-types';
import { Icon } from '../../atoms/icon/Icon';

const propTypes = {
  children: PropTypes.node,
  className: PropTypes.string,
  onToggle: PropTypes.func,
  /**
   * The component used for the root node.
   * Either a string to use a DOM element or a component.
   */
  tag: PropTypes.elementType,
};

const defaultProps = {
  children: '',
  className: '',
  onToggle: null,
  tag: 'div',
};

export const SecondLevelNav = ({
  children,
  className,
  onToggle,
  tag: Tag,
  ...props
}) => (
  <Tag className={`sui-l-second-level-nav ${className}`} {...props}>
    {!!onToggle && (
      <button
        type="button"
        className="sui-l-second-level-nav__toggle-button"
        onClick={onToggle}
      >
        <Icon name="reduce-nav" />
      </button>
    )}
    <div className="sui-l-second-level-nav__content">
      <div className="sui-l-second-level-nav__content-scroll">
        {children}
      </div>
    </div>
  </Tag>
);

SecondLevelNav.propTypes = propTypes;
SecondLevelNav.defaultProps = defaultProps;