fix: hide the Favorites collapse toggle when there are no favorites

The Favorites navigation section always renders now, but its collapse chevron stayed visible (and click-to-toggle) even with nothing to expand. Add an isToggleable prop to NavigationMenuItemSection (default true, so other sections are unchanged): when false the title shows no chevron and isn't click-to-toggle. FavoritesSection drives it from the favorites count.
2026-06-02 15:10:29 +02:00
2 changed files with 6 additions and 3 deletions
@@ -9,6 +9,7 @@ type NavigationMenuItemSectionProps = {
  title: string;
  isOpen: boolean;
  onToggle: () => void;
+  isToggleable?: boolean;
  rightIcon?: ReactNode;
  alwaysShowRightIcon?: boolean;
  forceExpanded?: boolean;
@@ -20,6 +21,7 @@ export const NavigationMenuItemSection = ({
  title,
  isOpen,
  onToggle,
+  isToggleable = true,
  rightIcon,
  alwaysShowRightIcon,
  forceExpanded = false,
@@ -28,7 +30,7 @@ export const NavigationMenuItemSection = ({
 }: NavigationMenuItemSectionProps) => {
  const content = (
    <AnimatedExpandableContainer
-      isExpanded={isOpen || forceExpanded}
+      isExpanded={(isToggleable && isOpen) || forceExpanded}
      dimension="height"
      mode="fit-content"
      containAnimation
@@ -43,10 +45,10 @@ export const NavigationMenuItemSection = ({
      <NavigationDrawerAnimatedCollapseWrapper>
        <NavigationDrawerSectionTitle
          label={title}
-          onClick={onToggle}
+          onClick={isToggleable ? onToggle : undefined}
          rightIcon={rightIcon}
          alwaysShowRightIcon={alwaysShowRightIcon}
-          isOpen={isOpen}
+          isOpen={isToggleable ? isOpen : undefined}
        />
      </NavigationDrawerAnimatedCollapseWrapper>
      {contentWrapper ? contentWrapper(content) : content}
@@ -123,6 +123,7 @@ export const FavoritesSection = () => {
    <NavigationMenuItemSection
      title={t`Favorites`}
      isOpen={topLevelItems.length > 0 && isNavigationSectionOpen}
+      isToggleable={topLevelItems.length > 0}
      onToggle={toggleNavigationSection}
      rightIcon={
        <LightIconButton