From cc5db2118939379d2e6f5f89a5d5b8fc4a8f175a Mon Sep 17 00:00:00 2001
From: Peter Siska <63866+peschee@users.noreply.github.com>
Date: Mon, 11 Mar 2024 16:48:02 +0100
Subject: [PATCH] feat: add a new tree-top slot

---
 .changeset/soft-starfishes-change.md               | 5 +++++
 packages/portal-navigation/src/PortalNavigation.ts | 8 +++++++-
 2 files changed, 12 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/soft-starfishes-change.md

diff --git a/.changeset/soft-starfishes-change.md b/.changeset/soft-starfishes-change.md
new file mode 100644
index 0000000..798229a
--- /dev/null
+++ b/.changeset/soft-starfishes-change.md
@@ -0,0 +1,5 @@
+---
+'@inventage-web-components/portal-navigation': minor
+---
+
+Adds a `tree-top` slot (for mobile menus) as well as some missing CSS parts related to these tree slots
diff --git a/packages/portal-navigation/src/PortalNavigation.ts b/packages/portal-navigation/src/PortalNavigation.ts
index 8f3ae7b..11d2599 100644
--- a/packages/portal-navigation/src/PortalNavigation.ts
+++ b/packages/portal-navigation/src/PortalNavigation.ts
@@ -154,6 +154,8 @@ type NavigationCssClasses = typeof NavigationCssClasses;
  * @csspart slot-left - Slot element wrapper for the left slot
  * @csspart slot-right - Slot element wrapper for the right slot
  * @csspart slot-current - Slot element wrapper for the current slot
+ * @csspart slot-tree-bottom - Slot element wrapper for the tree-bottom slot
+ * @csspart slot-tree-top - Slot element wrapper for the tree-top slot
  *
  * @csspart container - The top-level, container element wrapping everything inside the host element
  * @csspart hamburger-menu - The hamburger menu element (shown in mobile breakpoint)
@@ -212,6 +214,7 @@ type NavigationCssClasses = typeof NavigationCssClasses;
  * @slot meta-left - The left slot inside the meta bar
  * @slot meta-right - The right slot inside the meta bar
  * @slot header-mobile - The slot rendered in the top bar in the mobile breakpoint
+ * @slot tree-top - The slot rendered at the top of the menu tree (mobile breakpoint)
  * @slot tree-bottom - The slot rendered at the bottom of the menu tree (mobile breakpoint)
  * @slot current - The slot rendered next to the current items (2nd level), in non-mobile variant only
  */
@@ -571,8 +574,11 @@ export class PortalNavigation extends LitElement {
               ${this.renderMetaBar(menuLogout)}
               <!-- Hamburger Menu Tree Elements -->
               <div class="tree-container" part="tree-container">
+                <div class="slot-tree-top" part="slot-tree-top">
+                  <slot name="tree-top"></slot>
+                </div>
                 ${this._createTreeTemplate()}
-                <div class="slot-tree-bottom">
+                <div class="slot-tree-bottom" part="slot-tree-bottom">
                   <slot name="tree-bottom"></slot>
                 </div>
               </div>`