Skip to content

#2069 Fixed/The sidebar has empty sections with dividers when collapsed if Feeds, Squads, etc. sections are collapsed #5718

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
nchernys wants to merge 2 commits into
base: main
Choose a base branch
from
+25 −16
Open

#2069 Fixed/The sidebar has empty sections with dividers when collapsed if Feeds, Squads, etc. sections are collapsed #5718

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
146ac1c
Fix sidebar empty sections bug
nchernys Mar 12, 2026
9de0772
Merge branch 'main' into fix-sidebar-empty-sections
rebelchris Mar 13, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 25 additions & 16 deletions packages/shared/src/components/sidebar/Section.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,23 +53,13 @@ export function Section({
};

return (
<NavSection className={classNames('mt-1', className)}>
<NavSection className={classNames('mt-1 pb-2 relative h-auto', className)}>
{title && (
<NavHeader className="relative hidden laptop:flex">
{/* Divider shown when sidebar is collapsed */}
<NavHeader className="relative h-auto laptop:flex">
<div
className={classNames(
'absolute inset-x-0 flex items-center justify-center px-2 transition-opacity duration-300',
sidebarExpanded ? 'opacity-0' : 'opacity-100',
)}
>
<hr className="w-full border-t border-border-subtlest-tertiary" />
</div>
{/* Header content shown when sidebar is expanded */}
<div
className={classNames(
'group/section flex min-h-9 w-full items-center justify-between px-2 py-1.5 transition-opacity duration-300',
sidebarExpanded ? 'opacity-100' : 'pointer-events-none opacity-0',
'group/section flex min-h-9 w-full items-center justify-between px-2 py-1.5 transition-opacity duration-300 opacity-100',
!sidebarExpanded && 'flex-col',
)}
>
<button
Expand All @@ -79,11 +69,19 @@ export function Section({
aria-expanded={!!isVisible.current}
aria-controls={flag ? `section-${flag}` : undefined}
className="flex items-center gap-1 rounded-6 px-1 py-0.5 transition-colors hover:bg-surface-hover hover:text-text-primary"
title={
!sidebarExpanded
? isVisible.current
? `Hide ${title}`
: `Show ${title}`
: undefined
}
>
{/*Header text is hidden when sidebar is collapsed */}
<span
className={classNames(
'text-text-quaternary typo-callout',
!sidebarExpanded && 'opacity-0',
!sidebarExpanded && 'hidden',
)}
>
{title}
Expand All @@ -100,6 +98,7 @@ export function Section({
<a
aria-label={`Add to ${title}`}
className="flex h-6 w-6 items-center justify-center rounded-6 text-text-tertiary transition-all hover:bg-surface-hover hover:text-text-primary"
title={!sidebarExpanded ? `Add to ${title}` : undefined}
>
<PlusIcon className="h-4 w-4" />
</a>
Expand All @@ -111,6 +110,7 @@ export function Section({
onClick={onAdd}
aria-label={`Add to ${title}`}
className="flex h-6 w-6 items-center justify-center rounded-6 text-text-tertiary transition-all hover:bg-surface-hover hover:text-text-primary"
title={!sidebarExpanded ? `Add to ${title}` : undefined}
>
<PlusIcon className="h-4 w-4" />
</button>
Expand All @@ -121,7 +121,7 @@ export function Section({
<div
id={flag ? `section-${flag}` : undefined}
className={classNames(
'flex flex-col overflow-hidden transition-all duration-300',
'flex flex-col h-auto overflow-hidden transition-all duration-300',
isVisible.current || shouldAlwaysBeVisible
? 'max-h-[2000px] opacity-100'
: 'max-h-0 opacity-0',
Expand All @@ -137,6 +137,15 @@ export function Section({
/>
))}
</div>
{/* Divider shown when sidebar is collapsed */}
<div
className={classNames(
'absolute inset-x-0 h-full flex items-end justify-center px-2 transition-opacity duration-300 pointer-events-none',
sidebarExpanded ? 'opacity-0' : 'opacity-100',
)}
>
<hr className="w-full border-t border-border-subtlest-tertiary" />
</div>
</NavSection>
);
}
Loading