diff --git a/checkout/src/arquivos/js/components/Header.js b/checkout/src/arquivos/js/components/Header.js index febd2ad..c9d6666 100644 --- a/checkout/src/arquivos/js/components/Header.js +++ b/checkout/src/arquivos/js/components/Header.js @@ -18,11 +18,15 @@ export default class Header { interval: 1000, // vai verificar a cada 1 segundo se o elemento existe }); this.document = $(document); + this.window = $(window); } events() { this.document.ready(() => { this.createProgressBar(); }); + this.window.on("hashchange", () => { + this.isActive(); + }); } createProgressBar() { @@ -40,7 +44,17 @@ export default class Header { `; - console.log(this.progressBar); + this.progressBar.innerHTML = progressBar; + this.isActive(); + } + isActive() { + $(`.progress-bar__status.active`).removeClass("active"); + const hash = window.location.hash.replace("#/", ""); + $(`.progress-bar__status.${hash}`).addClass("active"); + console.log(`.progress-bar__status .${hash}`); + if (hash === "email" || hash === "shipping") { + $(`.progress-bar__status.profile`).addClass("active"); + } } } diff --git a/checkout/src/arquivos/sass/partials/_header.scss b/checkout/src/arquivos/sass/partials/_header.scss index edd89f9..8f48b65 100644 --- a/checkout/src/arquivos/sass/partials/_header.scss +++ b/checkout/src/arquivos/sass/partials/_header.scss @@ -10,13 +10,20 @@ } &__logo { + min-width: 382px; img { - height: 52px; - width: auto; + height: auto; + width: 100%; + } + a { + width: 100%; + display: block; } } &__safeBuy { + display: flex; + min-width: 235px; span { align-items: center; display: flex; @@ -29,7 +36,7 @@ color: $color-gray; } - i { + img { margin-right: 8px; } } @@ -37,13 +44,64 @@ .progress-bar { display: flex; + width: 100%; + justify-content: space-between; + margin: 0px 219px 0px 73px; &__title { margin-bottom: 15px; } &__wrapper { display: flex; + width: 100%; flex-direction: column; align-items: center; + position: relative; + &:not(:first-child, :last-child) { + &::before { + content: ""; + width: 50%; + height: 1px; + background: #000000; + position: absolute; + left: 0; + top: 77%; + z-index: -1; + } + &::after { + content: ""; + width: 50%; + height: 1px; + background: #000000; + position: absolute; + right: 0; + top: 77%; + z-index: -1; + } + } + &:last-child { + &::before { + content: ""; + width: 50%; + height: 1px; + background: #000000; + position: absolute; + left: 0; + top: 77%; + z-index: -1; + } + } + &:first-child { + &::after { + content: ""; + width: 50%; + height: 1px; + background: #000000; + position: absolute; + right: 0; + top: 77%; + z-index: -1; + } + } } &__status { @@ -51,10 +109,14 @@ height: 24px; border: 1px solid #000000; border-radius: 50%; - + z-index: 1; + background: #ffffff; &.cart { padding: 0; margin: 0; } + &.active { + background: #000000; + } } }