Avoid hidden duplicate Header links

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>

packages/ui/src/components/Header/Header.module.css

@@ -121,18 +121,11 @@
     align-items: center;
     gap: var(--bui-space-2);
     min-width: 0;
-    transition: opacity 200ms ease, transform 200ms ease;
-  }
-
-  .bui-HeaderBreadcrumbs {
-    opacity: 1;
     transform: translateY(-50%);
   }
 
   .bui-HeaderBreadcrumbsSmall {
     gap: var(--bui-space-1);
-    opacity: 0;
-    transform: translateY(25%);
   }
 
   .bui-HeaderBreadcrumbs .bui-HeaderBreadcrumbLink,
@@ -180,16 +173,6 @@
     font-size: var(--bui-font-size-4);
   }
 
-  .bui-HeaderContent[data-stuck] .bui-HeaderBreadcrumbs {
-    opacity: 0;
-    transform: translateY(-125%);
-  }
-
-  .bui-HeaderContent[data-stuck] .bui-HeaderBreadcrumbsSmall {
-    opacity: 1;
-    transform: translateY(-50%);
-  }
-
   .bui-HeaderTags {
     display: flex;
     flex-direction: row;

packages/ui/src/components/Header/Header.tsx

@@ -180,37 +180,8 @@ export const Header = (props: HeaderProps) => {
   const titleAndActionsContent = (
     <>
       <div className={classes.titleStack}>
-        <div
-          className={classes.breadcrumbs}
-          aria-hidden={isStuck || undefined}
-          inert={isStuck ? '' : undefined}
-        >
-          {breadcrumbs &&
-            breadcrumbs.map(breadcrumb => (
-              <Fragment key={breadcrumb.label}>
-                <Link
-                  href={breadcrumb.href}
-                  color="secondary"
-                  className={classes.breadcrumbLink}
-                  standalone
-                >
-                  {breadcrumb.label}
-                </Link>
-                <RiArrowRightSLine
-                  className={classes.breadcrumbSeparator}
-                  size={16}
-                  color="var(--bui-fg-secondary)"
-                />
-              </Fragment>
-            ))}
-          <h2 className={classes.title}>{title}</h2>
-        </div>
-        {sticky && (
-          <div
-            className={classes.breadcrumbsSmall}
-            aria-hidden={!isStuck || undefined}
-            inert={isStuck ? undefined : ''}
-          >
+        {isStuck ? (
+          <div className={classes.breadcrumbsSmall}>
             {breadcrumbs &&
               breadcrumbs.map(breadcrumb => (
                 <Fragment key={breadcrumb.label}>
@@ -231,6 +202,28 @@ export const Header = (props: HeaderProps) => {
               ))}
             <h2 className={classes.titleSmall}>{title}</h2>
           </div>
+        ) : (
+          <div className={classes.breadcrumbs}>
+            {breadcrumbs &&
+              breadcrumbs.map(breadcrumb => (
+                <Fragment key={breadcrumb.label}>
+                  <Link
+                    href={breadcrumb.href}
+                    color="secondary"
+                    className={classes.breadcrumbLink}
+                    standalone
+                  >
+                    {breadcrumb.label}
+                  </Link>
+                  <RiArrowRightSLine
+                    className={classes.breadcrumbSeparator}
+                    size={16}
+                    color="var(--bui-fg-secondary)"
+                  />
+                </Fragment>
+              ))}
+            <h2 className={classes.title}>{title}</h2>
+          </div>
         )}
       </div>
       <div className={classes.controls}>{customActions}</div>