feat: close sidebar menu when click outside

projects/ion/src/lib/sidebar/sidebar.component.html

@@ -47,7 +47,7 @@
   </section>
 </nav>
 
-<span>
+<span data-testid="ion-sidebar__outside-container">
   <ion-button
     data-testid="ion-sidebar__toggle-visibility"
     iconType="sandwich"

projects/ion/src/lib/sidebar/sidebar.component.ts

@@ -1,6 +1,6 @@
 import { Component, Input } from '@angular/core';
 import { IonSidebarProps } from '../core/types/sidebar';
-import { selectItemByIndex, callItemAction, unselectAllItems } from './utils';
+import { callItemAction, selectItemByIndex, unselectAllItems } from './utils';
 
 @Component({
   selector: 'ion-sidebar',
@@ -14,8 +14,31 @@ export class IonSidebarComponent {
 
   public closed = true;
 
+  public checkClikOnPageAccess = (event): void => {
+    this.checkClikOnPage(event);
+  };
+
+  public checkClikOnPage(event): void {
+    const containerElement = [document.querySelector('.ion-sidebar--opened')];
+    const innerElement = event.target;
+    if (containerElement.length && !containerElement.includes(innerElement)) {
+      const closeButton = document.querySelector(
+        '.ion-sidebar--opened .ion-sidebar__header button'
+      ) as HTMLElement;
+      if (closeButton) {
+        closeButton.click();
+      }
+      document.removeEventListener('click', this.checkClikOnPage);
+    }
+  }
+
   public toggleVisibility(): void {
     this.closed = !this.closed;
+    if (!this.closed) {
+      setTimeout(() => {
+        document.addEventListener('click', this.checkClikOnPageAccess);
+      });
+    }
   }
 
   public itemSelected(itemIndex: number): void {

projects/ion/src/lib/sidebar/sidebar.spec.ts

@@ -1,5 +1,5 @@
 import { CommonModule } from '@angular/common';
-import { render, screen } from '@testing-library/angular';
+import { render, screen, within } from '@testing-library/angular';
 import userEvent from '@testing-library/user-event';
 import { IonButtonModule } from '../button/button.module';
 import { IonSidebarProps } from '../core/types/sidebar';
@@ -12,6 +12,7 @@ const components = {
   sidebar: 'ion-sidebar',
   group: 'sidebar-group',
   toggleVisibility: 'ion-sidebar__toggle-visibility',
+  outsideContainer: 'ion-sidebar__outside-container',
 };
 
 const getByTestId = (key: keyof typeof components): HTMLElement => {
@@ -80,6 +81,11 @@ describe('Sidebar', () => {
       await sut({ items, logo, logoAction: actionMock });
       userEvent.click(getByTestId('toggleVisibility').firstElementChild);
     });
+
+    afterEach(async () => {
+      jest.clearAllMocks();
+    });
+
     it('should render sidebar', () => {
       expect(getByTestId('sidebar')).toBeInTheDocument();
     });
@@ -205,6 +211,27 @@ describe('Sidebar', () => {
       });
     });
   });
+  describe('Clicking outside it', () => {
+    it('should close sidebar after clicking outside it', async () => {
+      jest.useFakeTimers();
+      const timeDelay = 300;
+      const { detectChanges } = await render(IonSidebarComponent, {
+        declarations: [IonSidebarItemComponent, IonSidebarGroupComponent],
+        imports: [CommonModule, IonIconModule, IonButtonModule],
+      });
+
+      userEvent.click(getByTestId('toggleVisibility').firstElementChild);
+      userEvent.click(
+        within(getByTestId('outsideContainer')).getByTestId(
+          'ion-sidebar__toggle-visibility'
+        ).firstElementChild
+      );
+
+      jest.advanceTimersByTime(timeDelay);
+      detectChanges();
+      expect(getByTestId('sidebar')).not.toHaveClass('ion-sidebar--opened');
+    });
+  });
   describe('Group without action', () => {
     beforeEach(async () => {
       items[2].action = undefined;