Enhance TopBar component with scroll-based title visibility

.changeset/chilly-radios-relax.md

@@ -0,0 +1,5 @@
+---
+"@worldcoin/mini-apps-ui-kit-react": minor
+---
+
+Add title animation to TopBar

packages/mini-apps-ui-kit-react/src/components/TopBar/TopBar.tsx

@@ -1,4 +1,5 @@
 import { cn } from "@/lib/utils";
+import { useWindowScroll } from "@uidotdev/usehooks";
 import React from "react";
 
 import { Typography } from "../Typography";
@@ -15,37 +16,48 @@ interface TopBarProps {
 }
 
 function TopBar({ title, startAdornment, endAdornment, className }: TopBarProps) {
+  const [{ y }] = useWindowScroll();
+  const isScrolled = (y ?? 0) > 0;
   const hasStartAdornment = Boolean(startAdornment);
-  const hasEndAdornment = Boolean(endAdornment);
-
-  const textAlignment = hasStartAdornment ? "text-center" : "text-left";
-  const justifyContent =
-    hasStartAdornment || hasEndAdornment ? "justify-between" : "justify-start";
-
   return (
     <div
       className={cn(
-        "flex items-center px-6 pt-6 pb-2 w-full h-[4.5rem] gap-10",
-        justifyContent,
+        "flex items-center justify-center px-6 pt-6 pb-2 w-full h-[4.5rem] gap-10 relative",
         className,
       )}
     >
-      {startAdornment && <div className="shrink-0">{startAdornment}</div>}
+      {startAdornment && (
+        <div className="absolute left-6 size-10 overflow-hidden">{startAdornment}</div>
+      )}
+
+      {!hasStartAdornment && (
+        <Typography
+          key="heading"
+          variant={"heading"}
+          level={3}
+          className={cn(
+            "flex-1 grow truncate text-left absolute left-6 right-6 text-ellipsis overflow-hidden line-clamp-1",
+            isScrolled ? "opacity-0 duration-300" : "duration-700",
+          )}
+        >
+          {title}
+        </Typography>
+      )}
 
       <Typography
-        variant={hasStartAdornment ? "subtitle" : "heading"}
-        level={hasStartAdornment ? 1 : 3}
-        className={cn("flex-1 grow truncate", textAlignment)}
+        key="subtitle"
+        variant={"subtitle"}
+        level={1}
+        className={cn(
+          "truncate opacity-0 basis-1/2 text-center",
+          isScrolled || hasStartAdornment ? "opacity-100 duration-700" : "duration-300",
+        )}
       >
         {title}
       </Typography>
 
-      {endAdornment && <div className="shrink-0">{endAdornment}</div>}
-
-      {!endAdornment && hasStartAdornment && (
-        <div className="shrink-0 invisible" aria-hidden="true">
-          {startAdornment}
-        </div>
+      {endAdornment && (
+        <div className="absolute right-6 size-10 overflow-hidden">{endAdornment}</div>
       )}
     </div>
   );

packages/mini-apps-ui-kit-react/stories/TopBar.stories.tsx

@@ -85,6 +85,12 @@ export const Default: Story = {
   },
 };
 
+export const WithLongTitle: Story = {
+  args: {
+    title: "This is a long title that should be truncated",
+  },
+};
+
 export const WithStartAdornment: Story = {
   args: {
     title: "World",