feat(sidebar): Provide renderToggleButton for custom toggle component

Author: loonskai

src/elements/content-sidebar/ContentSidebar.js

@@ -377,6 +377,7 @@ class ContentSidebar extends React.Component<Props, State> {
             onPanelChange,
             onVersionChange,
             onVersionHistoryClick,
+            renderToggleButton,
             signSidebarProps,
             theme,
             versionsSidebarProps,
@@ -420,6 +421,7 @@ class ContentSidebar extends React.Component<Props, State> {
                                 onPanelChange={onPanelChange}
                                 onVersionChange={onVersionChange}
                                 onVersionHistoryClick={onVersionHistoryClick}
+                                renderToggleButton={renderToggleButton}
                                 signSidebarProps={signSidebarProps}
                                 theme={theme}
                                 versionsSidebarProps={versionsSidebarProps}

src/elements/content-sidebar/Sidebar.js

@@ -311,6 +311,7 @@ class Sidebar extends React.Component<Props, State> {
             metadataSidebarProps,
             onAnnotationSelect,
             onVersionChange,
+            renderToggleButton,
             signSidebarProps,
             theme,
             versionsSidebarProps,
@@ -351,6 +352,7 @@ class Sidebar extends React.Component<Props, State> {
                                 hasDocGen={docGenSidebarProps.isDocGenTemplate}
                                 isOpen={isOpen}
                                 onPanelChange={this.handlePanelChange}
+                                renderToggleButton={renderToggleButton}
                                 signSidebarProps={signSidebarProps}
                             />
                         )}

src/elements/content-sidebar/SidebarNav.js

@@ -58,6 +58,7 @@ type Props = {
     onPanelChange?: (name: string, isInitialState: boolean) => void,
     routerDisabled?: boolean,
     signSidebarProps: SignSidebarProps,
+    renderToggleButton: () => React.ReactNode,
 };
 
 const SidebarNav = ({
@@ -77,6 +78,7 @@ const SidebarNav = ({
     isOpen,
     onNavigate,
     onPanelChange = noop,
+    renderToggleButton,
     routerDisabled,
     signSidebarProps,
 }: Props) => {
@@ -203,6 +205,7 @@ const SidebarNav = ({
                     internalSidebarNavigation={internalSidebarNavigation}
                     internalSidebarNavigationHandler={internalSidebarNavigationHandler}
                     isOpen={isOpen}
+                    renderToggleButton={renderToggleButton}
                     routerDisabled={routerDisabled}
                 />
             </div>

src/elements/content-sidebar/SidebarToggle.js

@@ -11,38 +11,65 @@ import SidebarToggleButton from '../../components/sidebar-toggle-button/SidebarT
 import { SIDEBAR_NAV_TARGETS } from '../common/interactionTargets';
 import type { InternalSidebarNavigation, InternalSidebarNavigationHandler } from '../common/types/SidebarNavigation';
 
+type ToggleButtonProps = {
+    'data-resin-target'?: string,
+    'data-testid'?: string,
+    isOpen: boolean,
+    handleToggleClick: (event: React.MouseEvent<HTMLButtonElement>) => void,
+};
+
 type Props = {
     history?: RouterHistory,
     internalSidebarNavigation?: InternalSidebarNavigation,
     internalSidebarNavigationHandler?: InternalSidebarNavigationHandler,
     isOpen?: boolean,
+    renderToggleButton?: (toggleButtonProps: ToggleButtonProps) => React.ReactNode,
     routerDisabled?: boolean,
 };
 
-const SidebarToggle = ({ 
-    history, 
+const SidebarToggle = ({
+    history,
     internalSidebarNavigation,
     internalSidebarNavigationHandler,
     isOpen,
+    renderToggleButton,
     routerDisabled = false,
 }: Props) => {
-    const handleToggleClick = event => {
-        event.preventDefault();
-        
-        if (routerDisabled) {
-            // Use internal navigation handler when router is disabled
-            if (internalSidebarNavigationHandler && internalSidebarNavigation) {
-                internalSidebarNavigationHandler({
-                    ...internalSidebarNavigation,
-                    open: !isOpen,
-                }, true); // Always use replace for toggle
+    const handleToggleClick = React.useCallback(
+        (event: React.MouseEvent<HTMLButtonElement>) => {
+            event.preventDefault();
+
+            if (routerDisabled) {
+                // Use internal navigation handler when router is disabled
+                if (internalSidebarNavigationHandler && internalSidebarNavigation) {
+                    internalSidebarNavigationHandler(
+                        {
+                            ...internalSidebarNavigation,
+                            open: !isOpen,
+                        },
+                        true,
+                    ); // Always use replace for toggle
+                }
+            } else if (history) {
+                history.replace({ state: { open: !isOpen } });
             }
-        } else if (history) {
-            history.replace({ state: { open: !isOpen } });
-        }
-    };
+        },
+        [history, isOpen, routerDisabled, internalSidebarNavigationHandler, internalSidebarNavigation],
+    );
+
+    const renderProps = React.useMemo(
+        () => ({
+            isOpen,
+            onClick: handleToggleClick,
+            'data-resin-target': SIDEBAR_NAV_TARGETS.TOGGLE,
+            'data-testid': 'sidebartoggle',
+        }),
+        [isOpen, handleToggleClick],
+    );
 
-    return (
+    return renderToggleButton ? (
+        renderToggleButton(renderProps)
+    ) : (
         <SidebarToggleButton
             data-resin-target={SIDEBAR_NAV_TARGETS.TOGGLE}
             data-testid="sidebartoggle"