Function MobileHeader

app/_components/GlobalComponents/Layout/MobileHeader.tsx:22–101

({
  user,
  onOpenSettings,
  currentLocale,
}: MobileHeaderProps)

}

export const MobileHeader = ({
  user,
  onOpenSettings,
  currentLocale,
}: MobileHeaderProps) => {
  const { isRwMarkable } = useAppMode();
  const [isScrolled, setIsScrolled] = useState(true);
  const [scrollPos, setScrollPos] = useState(0);
  const lastScrollY = useRef(0);
  const router = useRouter();
  const t = useTranslations();

  useEffect(() => {
    const handleGlobalScroll = (e: Event) => {
      handleScroll(e, "jotty-scrollable-content", setIsScrolled, lastScrollY);
      setScrollPos(lastScrollY.current);
    };

    window.addEventListener("scroll", handleGlobalScroll, true);

    return () => {
      window.removeEventListener("scroll", handleGlobalScroll, true);
    };
  }, []);

  const handleLogout = async () => {
    await logout();
    router.push("/auth/login");
  };

  const mobileHeaderClasses = cn(
    "w-full z-30 border-transparent border-b border-border -mt-20",
    `lg:hidden flex items-center justify-between w-full py-3 px-4 transition-all duration-300 ease-in-out`,
    scrollPos < 150
      ? "relative bg-background !mt-0 !max-w-[100%] !left-0"
      : "fixed max-w-[80%] mt-5 left-[10%] border rounded-jotty bg-muted",
    isScrolled && scrollPos > 500 ? "mt-5" : scrollPos > 500 && "-mt-20",
  );

  return (
    <div className={mobileHeaderClasses}>
      <a href="/" className="flex items-center gap-3">
        <div className="relative">
          <DynamicLogo className="h-10 w-10" />
          <ConnectionIndicator
            borderColor={scrollPos < 150 ? "border-background" : "border-muted"}
          />
        </div>
        <div className="flex items-center gap-2">
          <AppName
            className="text-2xl font-bold text-foreground jotty-app-name"
            fallback={isRwMarkable ? "rwMarkable" : "jotty·page"}
          />
        </div>
      </a>

      {user ? (
        <div className="flex items-center gap-2">