From bff4100985f272276c6da01120463123c31f5bf4 Mon Sep 17 00:00:00 2001
From: Bittor Poza <bipoza@gmail.com>
Date: Mon, 22 Apr 2024 14:54:06 +0200
Subject: [PATCH] Add IonButtons with end slot

---
 src/useIonicHeaderParallax.ts | 21 ++++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

diff --git a/src/useIonicHeaderParallax.ts b/src/useIonicHeaderParallax.ts
index cc33f7a5..b8bcdbcd 100644
--- a/src/useIonicHeaderParallax.ts
+++ b/src/useIonicHeaderParallax.ts
@@ -58,6 +58,8 @@ export function useIonHeaderParallax({
       // ion-buttons
       const barButtons = header.querySelector('ion-buttons') as HTMLElement
 
+      const endBarButtons = header.querySelector('ion-buttons[slot="end"]') as HTMLElement
+
       // ion-content
       const ionContent = parentElement.querySelector('ion-content')
       if (!ionContent) throw new Error('Parallax requires an <ion-content> element on the page to work.')
@@ -79,6 +81,10 @@ export function useIonHeaderParallax({
         imageOverlay.appendChild(barButtons)
       }
 
+      if (endBarButtons) {
+        imageOverlay.appendChild(endBarButtons)
+      }
+
       /***  initStyles ***/
       // still in init use JS DOM
       setTicking(false)
@@ -112,6 +118,9 @@ export function useIonHeaderParallax({
       imageOverlay.style.pointerEvents = 'none'
       imageOverlay.style.backgroundSize = 'cover'
       imageOverlay.style.backgroundPosition = 'center'
+      imageOverlay.style.display = 'flex'
+      imageOverlay.style.justifyContent = 'space-between'
+      imageOverlay.style.alignItems = 'flex-start'
 
       // .toolbar-background
       toolbarBackground.style.backgroundColor = originalToolbarBgColor
@@ -124,7 +133,13 @@ export function useIonHeaderParallax({
           htmlBtn.style.color = titleColor
         })
       }
-
+      if (endBarButtons) {
+        endBarButtons.style.pointerEvents = 'all'
+        Array.from(endBarButtons.children).forEach((btn) => {
+          const htmlBtn = btn as HTMLElement
+          htmlBtn.style.color = titleColor
+        })
+      }
       // .scroll-content
       if (scrollContent) {
         scrollContent.style.paddingTop = `${imageOverlay.clientHeight - toolbar.clientHeight}px`
@@ -158,6 +173,8 @@ export function useIonHeaderParallax({
               if (barButtons && showBarButtons) {
                 if (targetHeight > headerMinHeight) {
                   imageOverlay.append(barButtons)
+                  imageOverlay.append(endBarButtons)
+
                   Array.from(barButtons.children).forEach((btn) => {
                     const htmlBtn = btn as HTMLElement
                     if (htmlBtn) {
@@ -167,6 +184,8 @@ export function useIonHeaderParallax({
                   })
                 } else {
                   toolbar.append(barButtons)
+                  toolbar.append(endBarButtons)
+
                   Array.from(barButtons.children).forEach((btn) => {
                     const htmlBtn = btn as HTMLElement
                     if (htmlBtn) {