fix(navigation-menu): bottom slot click event (#781)

Co-authored-by: Daniel Leroux <daniel.leroux@siemens.com>
siemens · Sep 25, 2023 · b632ad0 · b632ad0
1 parent 4fde4bf
commit b632ad0
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 1 deletion.
diff --git a/packages/core/src/components/menu/menu.tsx b/packages/core/src/components/menu/menu.tsx
@@ -656,7 +656,10 @@ export class Menu {
               {this.i18nSettings}
             </ix-menu-item>
           ) : null}
-          <slot name="bottom"></slot>
+          <div onClick={(e) => this.onMenuItemsClick(e)}>
+            <slot name="bottom"></slot>
+          </div>
+
           <div id="popover-area"></div>
           {this.about ? (
             <ix-menu-item

diff --git a/packages/core/src/components/menu/test/menu.ct.ts b/packages/core/src/components/menu/test/menu.ct.ts
@@ -182,6 +182,30 @@ test('should close about by item click', async ({ mount, page }) => {
   await expect(settings).not.toBeVisible();
 });
 
+test('should close menu by bottom icon click', async ({ mount, page }) => {
+  await mount(`
+    <ix-menu>
+      <ix-menu-item>Random</ix-menu-item>
+      <ix-menu-item slot="bottom">BottomMenuItem</ix-menu-item>
+      <ix-menu-about>
+      </ix-menu-about>
+      <ix-menu-settings>
+      </ix-menu-settings>
+    </ix-menu>
+  `);
+
+  const element = page.locator('ix-menu');
+  await element.getByRole('button', { name: 'Expand sidebar' }).click();
+  const innerMenu = element.locator('.menu');
+  await expect(innerMenu).toHaveClass(/expanded/);
+
+  const bottomMenu = element.locator('ix-menu-item[slot="bottom"]');
+  await bottomMenu.click();
+
+  await expect(innerMenu).not.toHaveClass(/expanded/);
+  await expect(element).toBeVisible();
+});
+
 async function clickAboutButton(element: Locator, page: Page) {
   const aboutButton = element.locator('ix-menu-item#aboutAndLegal');
   await aboutButton.click();