feat: Mimics tools behavior when there is only one drawer

src/app-layout/__tests__/desktop.test.tsx

@@ -293,6 +293,20 @@ describe('Classic only features', () => {
 
     expect(wrapper.findByClassName(iconStyles.badge)!.getElement()).toBeInTheDocument();
   });
+
+  test(`should toggle single drawer on click of container`, () => {
+    const { wrapper } = renderComponent(<AppLayout contentType="form" toolsHide={true} {...singleDrawer} />);
+    act(() => wrapper.findDrawersDesktopTriggersContainer()!.click());
+    expect(wrapper.findActiveDrawer()).toBeTruthy();
+    act(() => wrapper.findDrawersDesktopTriggersContainer()!.click());
+    expect(wrapper.findActiveDrawer()).toBeFalsy();
+  });
+
+  test(`should not toggle many drawers on click of container`, () => {
+    const { wrapper } = renderComponent(<AppLayout contentType="form" toolsHide={true} {...manyDrawers} />);
+    act(() => wrapper.findDrawersDesktopTriggersContainer()!.click());
+    expect(wrapper.findActiveDrawer()).toBeFalsy();
+  });
 });
 
 describe('VR only features', () => {

src/app-layout/drawer/index.tsx

@@ -196,15 +196,24 @@ export const DrawerTriggersBar = ({ isMobile, topOffset, bottomOffset, drawers }
     <div
       className={clsx(styles.drawer, styles['drawer-closed'], testutilStyles['drawer-closed'], {
         [styles['drawer-mobile']]: isMobile,
+        [styles.hide]: drawers?.items.length === 1 && drawers.activeDrawerId !== undefined,
       })}
       ref={containerRef}
     >
       <div
         ref={triggersContainerRef}
         style={{ top: topOffset, bottom: bottomOffset }}
-        className={clsx(styles['drawer-content'])}
+        className={clsx(styles['drawer-content'], {
+          [styles['drawer-content-clickable']]: drawers?.items.length === 1,
+        })}
         role="toolbar"
         aria-orientation="vertical"
+        onClick={() => {
+          drawers?.items.length === 1 &&
+            drawers?.onChange({
+              activeDrawerId: drawers.items[0].id !== drawers.activeDrawerId ? drawers.items[0].id : undefined,
+            });
+        }}
       >
         {!isMobile && (
           <aside
@@ -229,9 +238,10 @@ export const DrawerTriggersBar = ({ isMobile, topOffset, bottomOffset, drawers }
                     itemId={item.id}
                     isActive={drawers?.activeDrawerId === item.id}
                     onClick={() => {
-                      drawers?.onChange({
-                        activeDrawerId: item.id !== drawers.activeDrawerId ? item.id : undefined,
-                      });
+                      drawers?.items.length !== 1 &&
+                        drawers?.onChange({
+                          activeDrawerId: item.id !== drawers.activeDrawerId ? item.id : undefined,
+                        });
                     }}
                   />
                 );

src/app-layout/drawer/styles.scss

@@ -84,4 +84,15 @@ $drawer-z-index-mobile: 1001;
     background-color: awsui.$color-background-layout-toggle-selected-default;
     color: awsui.$color-text-layout-toggle-active;
   }
+  .drawer-triggers-wrapper > & {
+    .drawer-content-clickable > & {
+      &:hover {
+        color: awsui.$color-text-interactive-default;
+      }
+    }
+  }
+}
+
+.hide {
+  display: none;
 }

src/app-layout/index.tsx

@@ -394,6 +394,9 @@ const OldAppLayout = React.forwardRef(
 
       if (hasDrawers) {
         if (activeDrawer) {
+          if (drawers.length === 1) {
+            return activeDrawerSize;
+          }
           if (!isResizeInvalid && activeDrawerSize) {
             return activeDrawerSize + closedDrawerWidth;
           }