Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
69 lines (60 sloc) 1.66 KB
<nav class="nav has-shadow" style='box-shadow: 0 1px 0 rgba(219,219,219,.3);'>
<div class="nav-left">
<router-link to="/" class="nav-item">
<img src="../assets/logo.png" alt="Bulma logo">
<!-- This "nav-toggle" hamburger menu is only visible on mobile -->
<!-- You need JavaScript to toggle the "is-active" class on "nav-menu" -->
<span class="nav-toggle">
<!-- This "nav-menu" is hidden on mobile -->
<!-- Add the modifier "is-active" to display it on mobile -->
<div class="nav-right nav-menu">
<router-link to="/" class="nav-item is-tab" exact-active-class="is-active">
<div class="nav-item is-tab" :class="{ 'active-bottom-border': $route.path === '/cart' }">
<div class="field is-grouped">
<p class="control">
<router-link to='/cart' class="button is-info">
<span class="icon">
<i class="fa fa-shopping-cart"></i>
<span>Checkout ({{itemsInCart}})</span>
<style lang="scss">
.nav {
height: auto;
margin-bottom: 2rem;
.nav-item img {
max-height: 3.5rem;
.active-bottom-border {
border-bottom: 3px solid #00d1b2;
color: #00d1b2;
padding-bottom: calc(.75rem - 8px);
import { mapGetters } from 'vuex'
export default {
computed: {
let cart = this.$store.getters.cartProducts;
return cart.reduce((accum, item) => accum + item.quantity, 0)