@waasabi-ui/navbar-menu/dist/index.js

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Header = Header;

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

var _react = _interopRequireWildcard(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _reactScroll = require("react-scroll");

var _reactFocusLock = _interopRequireDefault(require("react-focus-lock"));

var _hooks = require("./hooks");

var _Burger = require("./Burger");

var _Menu = require("./Menu");

var _Header = require("./Header.styles");

/**
 * A Footer is a small section at the bottom of each page within a document.
 * It is often used to display company data or copyright information.
 *
 * Some websites may also include basic navigation links, such as "About Us," "Contact," and "Help."
 * Corporate website footers often include additional links to "Terms of Use," "Privacy Guidelines," and "Advertising" pages as well.
 */
function Header(_ref) {
  var background = _ref.background,
      src = _ref.src,
      color = _ref.color,
      link1 = _ref.link1,
      link2 = _ref.link2,
      link3 = _ref.link3,
      link4 = _ref.link4,
      link5 = _ref.link5,
      link6 = _ref.link6;

  var _useState = (0, _react.useState)(false),
      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
      open = _useState2[0],
      setOpen = _useState2[1];

  var node = (0, _react.useRef)();
  var menuId = 'main-menu';

  var scrollToTop = function scrollToTop() {
    _reactScroll.animateScroll.scrollToTop();
  };

  var _useWindowSize = (0, _hooks.useWindowSize)(),
      width = _useWindowSize.width;

  (0, _hooks.useOnClickOutside)(node, function () {
    return setOpen(false);
  });
  return /*#__PURE__*/_react["default"].createElement(_reactFocusLock["default"], {
    disabled: !open
  }, /*#__PURE__*/_react["default"].createElement(_Header.Wrapper, {
    classprefix: "header",
    name: "header",
    ref: node,
    background: background
  }, /*#__PURE__*/_react["default"].createElement(_Header.LogoContainer, null, /*#__PURE__*/_react["default"].createElement(_Header.Logo, {
    src: src,
    onClick: scrollToTop
  })), width <= 900 ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Burger.Burger, {
    open: open,
    setOpen: setOpen,
    "aria-controls": menuId
  }), /*#__PURE__*/_react["default"].createElement(_Menu.Menu, {
    open: open,
    setOpen: setOpen,
    id: menuId,
    link1: link1,
    link2: link2,
    link3: link3,
    link4: link4,
    link5: link5,
    link6: link6
  })) : /*#__PURE__*/_react["default"].createElement(_Header.MenuContainer, null, /*#__PURE__*/_react["default"].createElement(_Header.NavList, null, link1 && /*#__PURE__*/_react["default"].createElement(_Header.ListItem, {
    color: color
  }, /*#__PURE__*/_react["default"].createElement(_Header.NavItem, {
    activeClass: "active",
    to: link1.toLowerCase(),
    spy: true,
    smooth: true,
    offset: -120,
    duration: 500,
    color: color
  }, link1)), link2 && /*#__PURE__*/_react["default"].createElement(_Header.ListItem, {
    color: color
  }, /*#__PURE__*/_react["default"].createElement(_Header.NavItem, {
    activeClass: "active",
    to: link2.toLowerCase(),
    spy: true,
    smooth: true,
    offset: -50,
    duration: 500,
    color: color
  }, link2)), link3 && /*#__PURE__*/_react["default"].createElement(_Header.ListItem, {
    color: color
  }, /*#__PURE__*/_react["default"].createElement(_Header.NavItem, {
    activeClass: "active",
    to: link3.toLowerCase(),
    spy: true,
    smooth: true,
    offset: -50,
    duration: 500,
    color: color
  }, link3)), link4 && /*#__PURE__*/_react["default"].createElement(_Header.ListItem, {
    color: color
  }, /*#__PURE__*/_react["default"].createElement(_Header.NavItem, {
    activeClass: "active",
    to: link4.toLowerCase(),
    spy: true,
    smooth: true,
    offset: -50,
    duration: 500,
    color: color
  }, link4)), link5 && /*#__PURE__*/_react["default"].createElement(_Header.ListItem, {
    color: color
  }, /*#__PURE__*/_react["default"].createElement(_Header.NavItem, {
    activeClass: "active",
    to: link5.toLowerCase(),
    spy: true,
    smooth: true,
    offset: -50,
    duration: 500,
    color: color
  }, link5)), link6 && /*#__PURE__*/_react["default"].createElement(_Header.ListItem, {
    color: color
  }, /*#__PURE__*/_react["default"].createElement(_Header.NavItem, {
    activeClass: "active",
    to: link6.toLowerCase(),
    spy: true,
    smooth: true,
    offset: -50,
    duration: 500,
    color: color
  }, link6))))));
}

Header.propTypes = {
  /**
   The URL of the Logo's image.
   */
  src: _propTypes["default"].string,
  background: _propTypes["default"].string,
  color: _propTypes["default"].string,

  /**
   The Header's Links.
   */
  link1: _propTypes["default"].string,
  link2: _propTypes["default"].string,
  link3: _propTypes["default"].string,
  link4: _propTypes["default"].string,
  link5: _propTypes["default"].string,
  link6: _propTypes["default"].string
};
Header.defaultProps = {
  src: 'https://res.cloudinary.com/waasabi/image/upload/v1581425311/storybook/waasabi-logo_hrshpa.png',
  background: '#4A933D',
  // default transparent
  color: 'white',
  //  default white
  link1: 'Link1',
  link2: 'Link2',
  link3: 'Link3',
  link4: '',
  link5: '',
  link6: ''
};
Header.propsDef = {
  src: {
    type: 'text',
    "default": 'https://res.cloudinary.com/waasabi/image/upload/v1581425311/storybook/waasabi-logo_hrshpa.png'
  },
  background: {
    type: 'color',
    "default": '#4A933D'
  },
  // default transparent
  color: {
    type: 'color',
    "default": 'white'
  },
  //  default white
  link1: {
    type: 'text',
    "default": 'Link1'
  },
  link2: {
    type: 'text',
    "default": 'Link2'
  },
  link3: {
    type: 'text',
    "default": 'Link3'
  },
  link4: {
    type: 'text',
    "default": ''
  },
  link5: {
    type: 'text',
    "default": ''
  },
  link6: {
    type: 'text',
    "default": ''
  }
};