Merge pull request #2832 from Safelite/feature/CASH-1365

CASH-1365
This commit is contained in:
Johnny Shultz 2025-09-10 15:09:27 -04:00 committed by GitHub
commit 18efa5c1ae
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -1,5 +1,5 @@
<template>
<div class="funnel-header" v-if="imageSrc">
<div class="funnel-header" :class="{ scrolled: isScrolled }" v-if="imageSrc">
<div class="d-flex w-100">
<progress-bar :page="$route.name" />
</div>
@ -61,6 +61,7 @@ export default {
sierraChatOpen: false,
salesforceChatOpen: false,
isSalesforceTransferInProgress: false,
isScrolled: false,
};
},
props: {
@ -185,6 +186,12 @@ export default {
}
};
window.addEventListener("salesforce-chat-visibility", this._handleSalesforceChatOpened);
// Add scroll listener for header shadow effect
this._handleScroll = () => {
this.isScrolled = window.scrollY > 0;
};
window.addEventListener("scroll", this._handleScroll);
},
beforeUnmount() {
window.removeEventListener("sierra-chat-closed", this._handleSierraChatClosed);
@ -195,6 +202,7 @@ export default {
);
window.removeEventListener("sierra-chat-transfer", this._handleSierraToSalesforceTransfer);
window.removeEventListener("salesforce-chat-visibility", this._handleSalesforceChatOpened);
window.removeEventListener("scroll", this._handleScroll);
},
};
</script>
@ -209,9 +217,18 @@ export default {
padding: 2rem 0.75rem;
}
}
position: relative;
position: sticky;
top: 0;
z-index: 1000;
background-color: white;
box-shadow: none;
transition: box-shadow 0.3s ease-in-out;
padding: 0;
&.scrolled {
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
}
.button-container {
&.webchat {
margin-right: 0.875rem;