diff --git a/packages/shared/src/components/sidebar/Section.tsx b/packages/shared/src/components/sidebar/Section.tsx index 258fa22e4e..d619512945 100644 --- a/packages/shared/src/components/sidebar/Section.tsx +++ b/packages/shared/src/components/sidebar/Section.tsx @@ -62,6 +62,10 @@ export function Section({ // persisted `flag` (e.g. the settings panel groups) — otherwise the // collapse never visibly happens. const [isVisible, setIsVisible] = useState(initialIsVisible); + const shouldRenderItems = !title || isVisible || shouldAlwaysBeVisible; + const hasVisibleItems = items.some((item) => !item.isSeparator); + const shouldRenderHeader = + !!title && (sidebarExpanded || (shouldRenderItems && hasVisibleItems)); const toggleFlag = () => { const nextIsVisible = !isVisible; @@ -75,9 +79,9 @@ export function Section({ return ( - {title && ( + {shouldRenderHeader && ( - {/* Divider shown when a collapsible (titled) section is collapsed */} + {/* Divider shown when a visible titled section is collapsed */}