({
title,
items,
sidebarExpanded,
shouldShowLabel,
activePage,
isItemsButton,
className,
flag,
isAlwaysOpenOnMobile,
onAdd,
addHref,
compact = false,
}: SectionProps)
| 33 | } |
| 34 | |
| 35 | export function Section({ |
| 36 | title, |
| 37 | items, |
| 38 | sidebarExpanded, |
| 39 | shouldShowLabel, |
| 40 | activePage, |
| 41 | isItemsButton, |
| 42 | className, |
| 43 | flag, |
| 44 | isAlwaysOpenOnMobile, |
| 45 | onAdd, |
| 46 | addHref, |
| 47 | compact = false, |
| 48 | }: SectionProps): ReactElement { |
| 49 | const { flags, updateFlag } = useSettingsContext(); |
| 50 | const { sidebarRendered } = useSidebarRendered(); |
| 51 | const shouldAlwaysBeVisible = isAlwaysOpenOnMobile && !sidebarRendered; |
| 52 | const currentFlagValue = flag ? flags?.[flag] : undefined; |
| 53 | // The collapse toggle only renders alongside a section `title`. Without a |
| 54 | // title (e.g. the V2 sidebar's category panels) there is no way to |
| 55 | // re-expand, so a persisted `false` flag set from a layout that did show the |
| 56 | // toggle would strand the section permanently closed. Titleless sections are |
| 57 | // always expanded. |
| 58 | const initialIsVisible = |
| 59 | !title || isNullOrUndefined(currentFlagValue) ? true : currentFlagValue; |
| 60 | const isVisible = useRef(initialIsVisible); |
| 61 | |
| 62 | const toggleFlag = () => { |
| 63 | const nextIsVisible = !isVisible.current; |
| 64 | |
| 65 | if (flag) { |
| 66 | updateFlag(flag, nextIsVisible); |
| 67 | } |
| 68 | |
| 69 | isVisible.current = nextIsVisible; |
| 70 | }; |
| 71 | |
| 72 | return ( |
| 73 | <NavSection className={classNames('group/section mt-1', className)}> |
| 74 | {title && ( |
| 75 | <NavHeader className="relative hidden laptop:flex"> |
| 76 | {/* Divider shown when a collapsible (titled) section is collapsed */} |
| 77 | <div |
| 78 | className={classNames( |
| 79 | 'absolute inset-x-0 flex items-center justify-center px-2 transition-opacity duration-300', |
| 80 | sidebarExpanded ? 'opacity-0' : 'opacity-100', |
| 81 | )} |
| 82 | > |
| 83 | <hr className="w-full border-t border-border-subtlest-tertiary" /> |
| 84 | </div> |
| 85 | {/* Header content shown when sidebar is expanded */} |
| 86 | <div |
| 87 | className={classNames( |
| 88 | // `ml-3 mr-2 ... pl-1` aligns the section title's left edge |
| 89 | // with the items below it (items have `mx-3`), so "Feeds v" |
| 90 | // and the feed entries share the same x. Without this the |
| 91 | // header was indented less than the items. |
| 92 | 'ml-3 mr-2 flex min-h-9 flex-1 items-center justify-between py-1.5 pl-1 transition-opacity duration-300', |
nothing calls this directly
no test coverage detected