Amir
108 lines
2.7 KiB
Vue
108 lines
2.7 KiB
Vue
<template>
|
|
<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
|
|
<div class="container-fluid">
|
|
<a class="navbar-brand text-primary fw-bold" href="/">Sistem Lelong</a>
|
|
<button
|
|
class="navbar-toggler"
|
|
type="button"
|
|
data-bs-toggle="collapse"
|
|
data-bs-target="#navbarSupportedContent"
|
|
aria-controls="navbarSupportedContent"
|
|
aria-expanded="false"
|
|
aria-label="Toggle navigation"
|
|
>
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
|
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
|
|
<li class="nav-item">
|
|
<router-link class="nav-link" to="/">Home</router-link>
|
|
</li>
|
|
<li class="nav-item">
|
|
<router-link class="nav-link" to="/list">Senarai</router-link>
|
|
</li>
|
|
<!-- <li class="nav-item">
|
|
<router-link class="nav-link" to="/cart">Cart</router-link>
|
|
</li> -->
|
|
<li class="nav-item">
|
|
<router-link class="nav-link" to="/pay">Bayar</router-link>
|
|
</li>
|
|
<li class="nav-item">
|
|
<router-link class="nav-link" to="/profile">Profil</router-link>
|
|
</li>
|
|
<router-view />
|
|
</ul>
|
|
|
|
<router-link class="btn btn-primary me-5" to="/cart"
|
|
>Cart <i class="bi bi-cart-fill"></i
|
|
><span class="span_cart">{{
|
|
this.allCarts.length
|
|
}}</span></router-link
|
|
>
|
|
<button
|
|
class="btn btn-outline-secondary"
|
|
type="submit"
|
|
@click="doLogout"
|
|
>
|
|
Logout
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</template>
|
|
|
|
<script>
|
|
import axios from "axios";
|
|
import { mapGetters, mapActions } from "vuex";
|
|
|
|
export default {
|
|
name: "Navbar",
|
|
// props: {
|
|
// cart: Number,
|
|
// },
|
|
data() {
|
|
return {
|
|
cart: localStorage.getItem("cart"),
|
|
};
|
|
},
|
|
methods: {
|
|
doLogout() {
|
|
axios
|
|
.post(
|
|
"/user/logout",
|
|
{},
|
|
{
|
|
headers: {
|
|
Authorization: "Bearer " + localStorage.getItem("token"),
|
|
},
|
|
}
|
|
)
|
|
.then((response) => {
|
|
localStorage.removeItem("token");
|
|
localStorage.removeItem("id");
|
|
localStorage.removeItem("nokp");
|
|
this.$router.push("/login");
|
|
})
|
|
.catch((error) => {
|
|
console.log(error);
|
|
});
|
|
},
|
|
...mapActions(["fetchCarts"]),
|
|
|
|
},
|
|
computed: { ...mapGetters(["allCarts"]), },
|
|
created() {
|
|
this.fetchCarts();
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.span_cart {
|
|
background-color: #06367D;
|
|
margin-left: 8px;
|
|
padding: 6px;
|
|
border-radius: 24px;
|
|
}
|
|
</style>
|