Newer
Older
labs / tiddlers / content / labs / lab10 / _Labs_10_Navigation Menu.md

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-menu (if you haven't already done so). Add the following to the file:

"use strict";

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 controller JavaScript files as follows:

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

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

You will also need to import the data store since the navigation menu is using it to display the customer's name:

// import data store
import { dataStore } from './data-store.js'
app.use(dataStore);

You can add the menu to your HTML pages using:

<navmenu></navmenu>

Put this wherever you want the menu to appear.