fix(sidebar): sort issues [EE-3447] (#7147)

app/react/sidebar/SidebarSection.tsx

@@ -3,28 +3,50 @@ import { PropsWithChildren, ReactNode } from 'react';
 import { useSidebarState } from './useSidebarState';
 
 interface Props {
-  title: string;
-  renderTitle?: (className: string) => ReactNode;
+  title: ReactNode;
+  showTitleWhenOpen?: boolean;
+  'aria-label'?: string;
 }
 
 export function SidebarSection({
   title,
-  renderTitle,
   children,
+  showTitleWhenOpen,
+  'aria-label': ariaLabel,
 }: PropsWithChildren<Props>) {
-  const { isOpen } = useSidebarState();
-  const titleClassName =
-    'ml-3 text-sm text-gray-3 be:text-gray-6 transition-all duration-500 ease-in-out';
-
   return (
     <div>
-      {renderTitle
-        ? renderTitle(titleClassName)
-        : isOpen && <li className={titleClassName}>{title}</li>}
+      <SidebarSectionTitle showWhenOpen={showTitleWhenOpen}>
+        {title}
+      </SidebarSectionTitle>
 
-      <nav aria-label={title} className="mt-4">
+      <nav
+        aria-label={typeof title === 'string' ? title : ariaLabel}
+        className="mt-4"
+      >
         <ul>{children}</ul>
       </nav>
     </div>
   );
 }
+
+interface TitleProps {
+  showWhenOpen?: boolean;
+}
+
+export function SidebarSectionTitle({
+  showWhenOpen,
+  children,
+}: PropsWithChildren<TitleProps>) {
+  const { isOpen } = useSidebarState();
+
+  if (!isOpen && !showWhenOpen) {
+    return null;
+  }
+
+  return (
+    <li className="ml-3 text-sm text-gray-3 be:text-gray-6 transition-all duration-500 ease-in-out">
+      {children}
+    </li>
+  );
+}