Gravity Nav for Master

import React from 'react';

import { AuthContext, AppNav, Header, HoverNav, Button } from 'components/lib';
import ClassNames from 'classnames';
import '../layout.scss';
import './app.scss';

export class AppLayout extends React.Component {
	constructor() {
		super();
		this.user = JSON.parse(localStorage.getItem('user'));

	}
	render(){

		// remove the background color applied from the homepage
		document.body.classList.remove('color-bg');

		const cssClass = ClassNames({

			'app': true,
			'with-sidebar': true,
			'with-bottom-nav': true,
			'hide': this.props.loading

		});
		return (

			<>
				<AppNav
					type='fixed'
					items={[
						{ label: 'Dashboard', link: '/dashboard' },
						{ label: 'Customer Rewards', link: '/customer', hasSubNav: true }
					]}
				/>

				<main className={ cssClass }>

					<Header title={ this.props.title }>
						<HoverNav label={ this.context.user.username ? this.context.user.username : this.context.user.email  } align='right'>
							<Button text='Account Settings' action={ event => window.location = '/account' }/>
							{this.user.permission === 'admin' &&
							<Button text='Master Dashboard' action={ event => window.location = '/master' }/>
							}

							<Button text='Signout' action={ this.context.signout }/>
						</HoverNav>
					</Header>

					{ <this.props.children/> }

				</main>
			</>

		);
	}
}

AppLayout.contextType = AuthContext;