@kiwicom/orbit-components/lib/NavigationBar/index.js

Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.

"use strict";
"use client";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
exports.__esModule = true;
exports.default = void 0;
var React = _interopRequireWildcard(require("react"));
var _clsx = _interopRequireDefault(require("clsx"));
var _MenuHamburger = _interopRequireDefault(require("../icons/MenuHamburger"));
var _ButtonLink = _interopRequireDefault(require("../ButtonLink"));
var _useStateWithCallback = _interopRequireDefault(require("../hooks/useStateWithCallback"));
const NAVBAR_HEIGHT = {
  MOBILE: 52,
  DESKTOP: 64
};
const NavigationBar = ({
  onMenuOpen,
  children,
  dataTest,
  openTitle = "Open navigation menu",
  id,
  onShow,
  onHide,
  hideOnScroll = true
}) => {
  const resolveCallback = React.useCallback(state => {
    if (onHide && !state) onHide();
    if (onShow && state) onShow();
  }, [onHide, onShow]);
  const [shown, setShown] = (0, _useStateWithCallback.default)(true, resolveCallback);
  const [prevScrollPosition, setPrevScrollPosition] = React.useState(0);
  const handleNavigationBarPosition = React.useCallback(() => {
    const currentScrollPosition = window.scrollY || window.pageYOffset || document.documentElement && document.documentElement.scrollTop;
    if (!hideOnScroll) return;
    if (prevScrollPosition < currentScrollPosition && currentScrollPosition > NAVBAR_HEIGHT.DESKTOP) {
      setShown(false);
    } else {
      setShown(true);
    }
    setPrevScrollPosition(currentScrollPosition);
  }, [prevScrollPosition, setShown, hideOnScroll]);
  React.useEffect(() => {
    window.addEventListener("scroll", handleNavigationBarPosition);
    return () => {
      window.removeEventListener("scroll", handleNavigationBarPosition);
    };
  });
  return /*#__PURE__*/React.createElement("nav", {
    "data-test": dataTest,
    id: id,
    className: (0, _clsx.default)("bg-white-normal shadow-fixed p-sm z-navigation-bar fixed left-0 right-0 top-0 box-border flex w-full translate-x-0 items-center", "duration-normal transform-gpu transition-transform ease-in-out", "tb:h-[64px] h-[52px]",
    // As defined on the const above
    shown ? "translate-y-0" : "tb:translate-y-[-64px] translate-y-[-52px]" // As defined on the const above
    )
  }, /*#__PURE__*/React.createElement("div", {
    className: "me-xs block w-full"
  }, children), onMenuOpen && /*#__PURE__*/React.createElement(_ButtonLink.default, {
    type: "secondary",
    onClick: onMenuOpen,
    iconLeft: /*#__PURE__*/React.createElement(_MenuHamburger.default, null),
    title: openTitle
  }));
};
var _default = NavigationBar;
exports.default = _default;