checkout/src/arquivos/js/components/Header.js

@@ -8,20 +8,53 @@ export default class Header {
 
     async init() {
         await this.selectors();
-        console.log(this.item);
+        // console.log(this.item);
+        this.progressBarCronstructor();
     }
 
     async selectors() {
-        this.item = await waitElement("#my-element", {
+        // this.item = await waitElement("#my-element", {
-            //#my-element pode ser a class ou o id do elemento html qeu vocÊ quer pegar
+        //     //#my-element pode ser a class ou o id do elemento html qeu vocÊ quer pegar
-            timeout: 5000, // vai esperar 5 segundos antes de rejeitar a promise
+        //     timeout: 5000, // vai esperar 5 segundos antes de rejeitar a promise
-            interval: 1000, // vai verificar a cada 1 segundo se o elemento existe
+        //     interval: 1000, // vai verificar a cada 1 segundo se o elemento existe
-        });
+        // });
-        this.progressBar = await waitElement("#progressBar");
+        this.progressBar = await waitElement(".progress-bar");
     }
 
-    progressBarCronstructor (){
+    progressBarCronstructor() {
+        if (this.progressBar && window.innerWidth > 1024) {
+            this.progressBar.innerHTML = `
+            <ul class="container-total">
+                <li class="li-volta-borda-1">
+                    <div class="div-flex1">
+                        <div class="div-itens">
+                            <p class="p-text">Meu Carrinho</p>
+                            <p class="p-bola"></p>
+                            <p class="p-borda-1"></p>
+                        </div>
+                    </div>
+                </li>
 
+                <li class="li-volta-centro">
+                    <div class="div-flex2">
+                        <div class="div-itens">
+                            <p class="p-text">Dados Pessoais</p>
+                            <p class="p-bola"></p>
+                            <p class="p-borda-meio"></p>
+                        </div>
+                    </div>
+                </li>
+                <li class="li-volta-borda-2">
+                    <div class="div-flex3">
+                        <div class="div-itens">
+                            <p class="p-text">Pagamento</p>
+                            <p class="p-bola"></p>
+                            <p class="p-borda-2"></p>
+                        </div>
+                    </div>
+                </li>
+            </ul>
+            `;
+        }
     }
-
 }

checkout/src/arquivos/sass/checkout/_checkout-vazio.scss

@@ -15,8 +15,14 @@
 
 	&-title {
         margin: 170px 0 32px 0;
-        font-size: 24px;
+        font-size: 0px;
-        line-height: 33px;
+        line-height: 0px;
+
+        &::after{
+            content: "SEU CARRINHO ESTÁ VAZIO";
+            font-size: 24px;
+            line-height: 33px;
+        }
 	}
 
 	&-links {

checkout/src/arquivos/sass/checkout/_checkout.scss

@@ -30,6 +30,7 @@ header{
 .headerCheckout__safeBuy{
     display: flex;
     gap: 8px;
+    height: 15px;
 }
 
 body {

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

@@ -8,11 +8,87 @@
         align-items: center;
         display: flex;
         justify-content: space-between;
+
+        .progress-bar{
+            height: 35px;
+            .container-total{
+                display: grid;
+                padding: 0;
+                grid-template-columns: 2fr 1fr 2fr;
+                width: 439px;
+                /* border: 1px solid rgb(59, 51, 51); */
+                margin: 0;
+
+                .li-volta-borda-1,
+                .li-volta-borda-2,
+                .li-volta-centro {
+                    display: flex;
+                    flex-direction: column;
+                    list-style: none;
+                    /* border: 1px solid violet; */
+                }
+                .p-text{
+                    width: max-content;
+                    font-weight: 400;
+                    font-size: 12px;
+                    line-height: 14px;
+                    margin-bottom: 9px;
+                }
+                .p-bola{
+                    border: 1px solid black;
+                    border-radius: 50%;
+                    width: 10px;
+                    height: 10px;
+                    background-color: white;
+                }
+                .div-itens{
+                    display: flex;
+                    flex-direction: column;
+                    align-items: center;
+                    justify-content: center;
+                }
+                .div-flex1,
+                .div-flex2,
+                .div-flex3 {
+                    display: flex;
+                    position: relative;
+                    width: 100%;
+                }
+
+                .div-flex1{
+                    justify-content: flex-start;
+                }
+                .div-flex2{
+                    justify-content: center;
+                }
+                .div-flex3{
+                    justify-content: flex-end;
+                }
+                .p-borda-1{
+                    border-top: 1.5px solid black;
+                    position: absolute;
+                    left: 25.6%;
+                    bottom: 5px;
+                    margin: 0;
+                    width: 95.9%;
+                    transform: translateY(-7px);
+                }
+                .p-borda-2{
+                    border-top: 1.5px solid black;
+                    position: absolute;
+                    right: 22%;
+                    bottom: 5px;
+                    margin: 0;
+                    width: 99.3%;
+                    transform: translateY(-7px);
+                }
+            }
+        }
     }
 
     &__logo {
         img {
-            height: 52px;
+            height: 37.14px;
             width: auto;
         }
     }