feat: adicionando css a header da pagina

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 {
                 <span class="progress-bar__status payment"></span>
             </div>
             `;
-        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");
+        }
     }
 }

checkout/src/arquivos/sass/partials/_header.scss

@@ -10,13 +10,20 @@
     }
 
     &__logo {
+        min-width: 382px;
         img {
-            height: 52px;
+            height: auto;
-            width: 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;
+        }
     }
 }