@xo-union/tk-component-header-nav/lib/components/HeaderNav/ResizeObserverNav/index.cjs.js

"use strict";

var _Object$defineProperty = require("@babel/runtime-corejs3/core-js/object/define-property");
var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
_Object$defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
var _globalThis2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js/global-this"));
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
const ResizeObserverNav = _ref => {
  let {
    isHamburgerOpenInMobile,
    children,
    ...props
  } = _ref;
  const [bottomOfHeader, setBottomOfHeader] = _react.default.useState('65px' /* default bottom */);

  const headerNavRef = _react.default.useRef();
  _react.default.useEffect(() => {
    // IE 11 fix to bypass resize observer without a polyfill. This useEffect is
    // only needed for the mobile view
    if (!_globalThis2.default.ResizeObserver) {
      return;
    }
    const resizeObserver = new ResizeObserver(() => {
      if (isHamburgerOpenInMobile) {
        const {
          bottom
        } = headerNavRef.current.getBoundingClientRect();
        setBottomOfHeader(`${bottom}px`);
      }
    });
    const {
      body
    } = document;
    resizeObserver.observe(body);

    // eslint-disable-next-line consistent-return
    return () => {
      resizeObserver.unobserve(body);
    };
  }, [isHamburgerOpenInMobile]);
  return /*#__PURE__*/_react.default.createElement("nav", (0, _extends2.default)({
    ref: headerNavRef,
    style: {
      '--bottom-of-header': bottomOfHeader
    }
  }, props), children);
};
process.env.NODE_ENV !== "production" ? ResizeObserverNav.propTypes = {
  children: _propTypes.default.node,
  isHamburgerOpenInMobile: _propTypes.default.bool
} : void 0;
var _default = ResizeObserverNav;
exports.default = _default;