Listen to pathname changes.

[JoshuaKirby88]

Currently, navigating away from the path where the highlighted element is mounted has no effect on the pointerPosition. Listening to pathname changes can hide the Onborda overlay, and reveal it once navigating back to the correct pathname.

Change 1:

• Return null if element is falsy.

  const getElementPosition = (element: Element) => {
    if (!element) return null

    const { top, left, width, height } = element.getBoundingClientRect();
    const scrollTop = window.scrollY || document.documentElement.scrollTop;
    const scrollLeft = window.scrollX || document.documentElement.scrollLeft;
    return {
      x: left + scrollLeft,
      y: top + scrollTop,
      width,
      height,
    };
  };

Change 2:

• Added pathname to the useEffect dependency array.

  import { usePathname } from "next/navigation";
  const pathname = usePathname();

  useEffect(() => {
    if (isOnbordaVisible && currentTourSteps) {
      console.log("Onborda: Current Step Changed");
      const step = currentTourSteps[currentStep];
      if (step) {
        const element = document.querySelector(step.selector) as Element | null;
        if (element) {
          setPointerPosition(getElementPosition(element));
          currentElementRef.current = element;
          setElementToScroll(element);

          const rect = element.getBoundingClientRect();
          const isInViewportWithOffset =
            rect.top >= -offset && rect.bottom <= window.innerHeight + offset;

          if (!isInView || !isInViewportWithOffset) {
            element.scrollIntoView({ behavior: "smooth", block: "center" });
          }
        }
      }
    }
  }, [currentStep, currentTourSteps, isInView, offset, isOnbordaVisible, pathname]);

[uixmat]

I'll consider adding an option @JoshuaKirby88 to do this on a per step basis. The reason i don't want to do this, is i want the tip to transition between elements across route changes - particularly on SaaS products where the pathname may change but much of the layout remains the same / in the viewport

[JoshuaKirby88]

Right, that makes sense, sorry I was just sharing some things that I was configuring. Onborda is great by the way.

Just one small thing, I think you forgot to add transition to the border radius of the child motion.div that highlights the viewport. You can either remove it from the "style" prop and add it to the "initial" and "animate" prop, or add "transition-[border-radius]" to the className prop.