CASH-1365

CASH-1365 made global change to make header sticky like heritage
This commit is contained in:
Johnny shultz 2025-09-10 14:36:46 -04:00
parent 8b254b8fc4
commit b6bcc4100e

View file

@ -1,5 +1,5 @@
<template> <template>
<div class="funnel-header" v-if="imageSrc"> <div class="funnel-header" :class="{ scrolled: isScrolled }" v-if="imageSrc">
<div class="d-flex w-100"> <div class="d-flex w-100">
<progress-bar :page="$route.name" /> <progress-bar :page="$route.name" />
</div> </div>
@ -61,6 +61,7 @@ export default {
sierraChatOpen: false, sierraChatOpen: false,
salesforceChatOpen: false, salesforceChatOpen: false,
isSalesforceTransferInProgress: false, isSalesforceTransferInProgress: false,
isScrolled: false,
}; };
}, },
props: { props: {
@ -185,6 +186,12 @@ export default {
} }
}; };
window.addEventListener("salesforce-chat-visibility", this._handleSalesforceChatOpened); 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() { beforeUnmount() {
window.removeEventListener("sierra-chat-closed", this._handleSierraChatClosed); window.removeEventListener("sierra-chat-closed", this._handleSierraChatClosed);
@ -195,6 +202,7 @@ export default {
); );
window.removeEventListener("sierra-chat-transfer", this._handleSierraToSalesforceTransfer); window.removeEventListener("sierra-chat-transfer", this._handleSierraToSalesforceTransfer);
window.removeEventListener("salesforce-chat-visibility", this._handleSalesforceChatOpened); window.removeEventListener("salesforce-chat-visibility", this._handleSalesforceChatOpened);
window.removeEventListener("scroll", this._handleScroll);
}, },
}; };
</script> </script>
@ -209,9 +217,18 @@ export default {
padding: 2rem 0.75rem; 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; padding: 0;
&.scrolled {
box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
}
.button-container { .button-container {
&.webchat { &.webchat {
margin-right: 0.875rem; margin-right: 0.875rem;