Fix style mobile view, toast and cart

src/components/home/LelongToday.vue

@@ -43,7 +43,7 @@ export default {
       var mm = String(today.getMonth() + 1).padStart(2, "0"); //January is 0!
       var yyyy = today.getFullYear();
 
-      today = yyyy + "-" + mm + "-" + dd;
+      today = dd + "-" + mm + "-" + yyyy;
       this.date = today;
     },
   },

src/components/layouts/TheHeader.vue

@@ -1,7 +1,9 @@
 <template>
   <!-- Navbar for laptop screen size (width>992px) -->
-  <Toast :breakpoints="{ '500px': { width: '100%', right: '0', left: '0' } }" />
   <div class="card sticky-top lg:flex hidden border-none">
+    <Toast
+      :breakpoints="{ '992px': { display: 'none' },  }"
+    />
     <div
       class="
         flex
@@ -92,6 +94,11 @@
       "
     >
       <div class="flex align-items-center justify-content-center">
+        <i
+          class="pi pi-bars text-white lg:hidden mr-3"
+          style="cursor: pointer"
+          @click="visibleRight = true"
+        ></i>
         <div class="company-title" type="button" v-on:click="toHome()">
           <div class="logo-title">ArrahnBid</div>
           <img class="logo-img" src="img/logo_arrahn.png" alt="arrahn-logo" />
@@ -99,19 +106,40 @@
       </div>
 
       <div class="flex align-items-center justify-content-center">
-        <i
-          class="pi pi-bars text-white lg:hidden"
+        <!-- <i
+          class="pi pi-shopping-cart text-white lg:hidden"
+          style="cursor: pointer"
           @click="visibleRight = true"
+        ></i> -->
+        <!-- <i
+          class="pi pi-shopping-cart mr-1 p-text-primary"
+          style="font-size: 1.5rem; color: #eaf0f9"
+          v-badge.success="itemInCart"
+          v-on:click="toCart()"
+          v-if="isSuccessCart"
+        ></i> -->
+        <i
+          class="pi pi-shopping-cart mr-1 p-text-primary"
+          style="font-size: 1.5rem; color: #eaf0f9"
+          v-on:click="toCart()"
         ></i>
       </div>
     </div>
-    <!-- <div>
-      <div class="flex justify-content-center h-2rem bg-red-500">
-        Countdown 00:00:00
+    <div v-if="lelongOnline != ''">
+      <div
+        class="
+          flex
+          align-items-center
+          justify-content-center
+          notification-mobile
+        "
+      >
+        <i class="pi pi-info-circle mr-2"></i> Lelongan akan tamat pada
+        {{ lelongOnline }}
       </div>
-    </div> -->
+    </div>
   </div>
-  <Sidebar v-model:visible="visibleRight" position="right">
+  <Sidebar v-model:visible="visibleRight" position="left">
     <div class="grid">
       <div class="col-12">
         <div class="text-center">
@@ -187,10 +215,13 @@ export default {
       username: localStorage.getItem("username"),
       visibleRight: false,
       lelongOnline: "",
+      isSuccessCart: false,
+      itemInCart: 0,
     };
   },
   mounted: function () {
     this.getLelongOnline();
+    // this.getItemInCart();
   },
   methods: {
     doLogout() {
@@ -218,6 +249,9 @@ export default {
     toProfile() {
       this.$router.push({ name: "profile" });
     },
+    toCart() {
+      this.$router.push({ name: "cart" });
+    },
     getLelongOnline() {
       axios
         .get("/lelongOnline", {
@@ -242,6 +276,30 @@ export default {
           console.log(error);
         });
     },
+    getItemInCart() {
+      this.loading = true;
+      axios
+        .get("/itemInCart", {
+          headers: {
+            Authorization: "Bearer " + localStorage.getItem("token"),
+          },
+          params: {
+            user_id: localStorage.getItem("id"),
+          },
+        })
+
+        .then((response) => {
+          if (response.data.success === true) {
+            this.isSuccessCart = true;
+            this.itemInCart = response.data.cart;
+          } else {
+            this.isSuccessCart = false;
+          }
+        })
+        .catch((error) => {
+          console.log(error);
+        });
+    },
   },
 };
 </script>
@@ -279,7 +337,12 @@ export default {
 router-link:hover {
   color: blue;
 } */
-
+.notification-mobile {
+  background: #e9e9ff;
+  color: #696cff;
+  height: 2.5rem;
+  padding: 25px 10px;
+}
 .main-color {
   background-color: #1e417b;
 }