Every page will have a navigation menu on it. The menu will display different buttons depending on if a customer is signed in or not. We should create a reusable component for this purpose.

Create a new JavaScript file named navigation. Add the following to the file:

"use strict";

// import data store
import { dataStore } from './data-store.js'

export const NavigationMenu = {

    computed: {
        signedIn() {
            return this.customer != null;
        },
        ...Vuex.mapState({
            customer: 'customer'
        })
    },

    template:
    `
    <nav>
        <div v-if="signedIn">Welcome {{customer.firstName}}</div>
        <a href=".">Home</a>
        <a href="products.html" v-if="signedIn">Browse Products</a>
        <a href="cart.html" v-if="signedIn">View Cart</a>
        <a href="#" v-if="signedIn" @click="signOut()">Sign Out</a>
        <a href="signin.html" v-if="!signedIn">Sign In</a>
    </nav>
    `,

    methods:{
        signOut() {
            sessionStorage.clear();
            window.location = '.';
        }
    }
};

• The computed block has a function named signedIn that will return a boolean based on whether a customer is signed in or not.

• The computed block is also pulling the customer out of the session storage, and merging that object with the signedIn function via the spread operator (the ...). The spread operator is necessary because the mapState method returns an object which means that we now have two objects in the computed function but we can only have one, so we need to merge them.

• The template block is the HTML template for the menu. Adapt the code, and the file names to suit.

• Some of the HTML tags contain v-if elements that will cause Vue to only include the tag if the signedIn function returns true. This is how we hide the buttons that should not be shown if the user is not signed in.

• The methods block contains a signOut function that clears the session storage and redirects the browser back to the home page.

You will need to import this module into your product-list.js, customer.js, and cart.js files as follows:

// import navigation  menu component
import { NavigationMenu } from './navigation.js';
app.component('navigation', NavigationMenu);

This should go at the bottom of the files, but above the app.mount call.

You can add the menu to your HTML pages using:

<navigation></navigation>

Put this wherever you want the menu to appear.