@kloudlite/design-system/mjs/organisms/top-bar.js

A design system for building ambitious products.

// components/organisms/top-bar.tsx
import {
  createContext,
  createRef,
  useEffect,
  useMemo as useMemo2,
  useState
} from "react";

// components/utils.tsx
import classNames from "classnames";
import { useMemo } from "react";
import { v4 } from "uuid";
var cn = (...props) => {
  return classNames(...props);
};

// components/atoms/container.tsx
import { jsx } from "react/jsx-runtime";
var Container = ({ children, className = "" }) => {
  return /* @__PURE__ */ jsx(
    "div",
    {
      className: cn("kl-flex kl-flex-1 kl-justify-center kl-px-8xl", className),
      children: /* @__PURE__ */ jsx("div", { className: cn("kl-flex-1 kl-w-full kl-max-w-8xl kl-min-w-[320px]"), children })
    }
  );
};
var container_default = Container;

// components/organisms/top-bar.tsx
import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
var TopBarContext = createContext({});
var useSticky = (elementRef, topLimit = 0) => {
  const [isStickey, setIsSticky] = useState(false);
  useEffect(() => {
    const getScroll = () => {
      if (elementRef && elementRef.current) {
        const { top } = elementRef.current.getBoundingClientRect();
        if (top < topLimit) {
          setIsSticky(true);
        } else {
          setIsSticky(false);
        }
      }
    };
    document.addEventListener("scroll", getScroll);
    return () => {
      document.removeEventListener("scroll", getScroll);
    };
  }, [elementRef, topLimit]);
  return isStickey;
};
var TopBar = ({
  tabs,
  actions,
  logo,
  fixed = true,
  breadcrum
}) => {
  const tabBarRef = createRef();
  const isTabBarSticked = useSticky(tabBarRef, 0);
  const headingRef = createRef();
  const isHeadingSticked = useSticky(headingRef, 0);
  return /* @__PURE__ */ jsxs(Fragment, { children: [
    /* @__PURE__ */ jsx2(
      "div",
      {
        ref: headingRef,
        className: cn(
          "kl-bg-surface-basic-default kl-z-40 kl-transition-all kl-overflow-hidden",
          {
            "kl-sticky -kl-top-xs kl-left-0 kl-right-0": !tabs && fixed,
            "kl-shadow-sm kl-pt-xs": !tabs && fixed && isHeadingSticked
          }
        ),
        children: /* @__PURE__ */ jsx2(container_default, { children: /* @__PURE__ */ jsxs("div", { className: "kl-flex kl-flex-row kl-items-center kl-gap-3xl kl-py-xl", children: [
          /* @__PURE__ */ jsxs("div", { className: "kl-flex kl-flex-row kl-gap-md kl-items-center", children: [
            !!logo && logo,
            !!breadcrum && breadcrum
          ] }),
          /* @__PURE__ */ jsx2("div", { className: "kl-flex kl-flex-row kl-items-center kl-justify-end kl-flex-1", children: /* @__PURE__ */ jsx2("div", { className: "kl-flex kl-flex-row kl-items-center kl-justify-center", children: !!actions && actions }) })
        ] }) })
      }
    ),
    /* @__PURE__ */ jsx2(
      TopBarContext.Provider,
      {
        value: useMemo2(
          () => ({ isSticked: isTabBarSticked && fixed }),
          [isTabBarSticked]
        ),
        children: !!tabs && /* @__PURE__ */ jsx2(
          "div",
          {
            ref: tabBarRef,
            className: cn(
              "kl-bg-surface-basic-default kl-z-40 kl-min-h-[40px]",
              {
                "kl-sticky -kl-top-xs kl-pt-xs kl-left-0 kl-right-0": fixed,
                "kl-shadow-sm": fixed && isTabBarSticked
              }
            ),
            children: /* @__PURE__ */ jsx2(container_default, { children: tabs })
          }
        )
      }
    ),
    /* @__PURE__ */ jsx2("div", { className: "kl-border-b kl-border-border-default" })
  ] });
};
export {
  TopBar,
  TopBarContext
};