Keep breadcrumb highlighted when popover active

PostHog · Nov 7, 2023 · 6a7af16 · 6a7af16
1 parent 0f1a2c5
commit 6a7af16
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 1 deletion.
diff --git a/frontend/src/layout/navigation-3000/components/Breadcrumbs.scss b/frontend/src/layout/navigation-3000/components/Breadcrumbs.scss
@@ -78,7 +78,8 @@
 
     &.Breadcrumbs3000__breadcrumb--actionable {
         cursor: pointer;
-        &:hover > span {
+        &:hover > span,
+        &.Breadcrumbs3000__breadcrumb--open > span {
             opacity: 1;
         }
     }

diff --git a/frontend/src/layout/navigation-3000/components/Breadcrumbs.tsx b/frontend/src/layout/navigation-3000/components/Breadcrumbs.tsx
@@ -36,6 +36,7 @@ export function Breadcrumbs(): JSX.Element | null {
         <div
             className="Breadcrumbs3000"
             style={
+                // eslint-disable-line react/forbid-dom-props
                 {
                     '--breadcrumbs-compaction-rate': compactionRate,
                 } as React.CSSProperties
@@ -78,6 +79,7 @@ function Breadcrumb({ breadcrumb, index, here }: BreadcrumbProps): JSX.Element {
         <Component
             className={clsx(
                 'Breadcrumbs3000__breadcrumb',
+                popoverShown && 'Breadcrumbs3000__breadcrumb--open',
                 (breadcrumb.path || breadcrumb.popover) && 'Breadcrumbs3000__breadcrumb--actionable',
                 here && 'Breadcrumbs3000__breadcrumb--here'
             )}