@kiwicom/orbit-components
Version:
Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.
60 lines (59 loc) • 2.25 kB
JavaScript
"use client";
import * as React from "react";
import cx from "clsx";
import MenuHamburger from "../icons/MenuHamburger";
import ButtonLink from "../ButtonLink";
import useStateWithCallback from "../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] = useStateWithCallback(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: cx("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, {
type: "secondary",
onClick: onMenuOpen,
iconLeft: /*#__PURE__*/React.createElement(MenuHamburger, null),
title: openTitle
}));
};
export default NavigationBar;