From fb2d211d41465dcfc7935c5f5094163fa483391f Mon Sep 17 00:00:00 2001
From: Peter Siska <63866+peschee@users.noreply.github.com>
Date: Mon, 15 Apr 2024 11:21:06 +0200
Subject: [PATCH] feat: add dropdown part

---
 .changeset/fifty-timers-collect.md                 | 5 +++++
 packages/portal-navigation/src/PortalNavigation.ts | 3 ++-
 2 files changed, 7 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/fifty-timers-collect.md

diff --git a/.changeset/fifty-timers-collect.md b/.changeset/fifty-timers-collect.md
new file mode 100644
index 0000000..1a371a2
--- /dev/null
+++ b/.changeset/fifty-timers-collect.md
@@ -0,0 +1,5 @@
+---
+'@inventage-web-components/portal-navigation': minor
+---
+
+Add `dropdown` CSS part for the dropdown overlay
diff --git a/packages/portal-navigation/src/PortalNavigation.ts b/packages/portal-navigation/src/PortalNavigation.ts
index dca2e9a..e0af8ad 100644
--- a/packages/portal-navigation/src/PortalNavigation.ts
+++ b/packages/portal-navigation/src/PortalNavigation.ts
@@ -171,6 +171,7 @@ type NavigationCssClasses = typeof NavigationCssClasses;
  * @csspart current - Element wrapper for the current items (2nd level) container
  * @csspart tree-container - Element wrapper for the tree items container (mobile breakpoint)
  * @csspart navigation-header-container - Element for the navigation header in mobile breakpoint
+ * @csspart dropdown - Element for the dropdown overlay
  *
  * @csspart menu-tree - Element wrapper for the tree menu items (mobile breakpoint)
  * @csspart menu-tree-main - Element wrapper for the tree menu items for the main menu (mobile breakpoint)
@@ -813,7 +814,7 @@ export class PortalNavigation extends LitElement {
           @click="${() => this.__toggleDropdown(menuId)}"
           >${PortalNavigation._createLinkTemplate(undefined, menuId, label, menu.icon, badge)}</span
         >
-        <div class="dropdown ${classMap({ '-show': this.activeDropdown === menuId })}">
+        <div class="dropdown ${classMap({ '-show': this.activeDropdown === menuId })}" part="dropdown">
           ${menu.items.map(item => this._createFirstLevelItemTemplate(item, false, menuId))}
         </div>`;
     }