As part of the accounts workflow, Pup intelligently switches out navigation based on the existence of a user. This is handled in three parts: the main <Navigation /> component and the two navigation lists it renders <PublicNavigation /> and <AuthenticatedNavigation />.

Inside of the <Navigation /> component, a test for a prop authenticated—passed down from the main <App /> component at /imports/ui/layouts/App/App.js—is checked in order to toggle between the <PublicNavigation /> and <AuthenticatedNavigation /> components. If authenticated is false, the <PublicNavigation /> component is rendered and if authenticated is true, the <AuthenticatedNavigation /> component is rendered.

import React from 'react';
import PropTypes from 'prop-types';
import { Navbar } from 'react-bootstrap';
import { Link } from 'react-router-dom';
import PublicNavigation from '../PublicNavigation/PublicNavigation';
import AuthenticatedNavigation from '../AuthenticatedNavigation/AuthenticatedNavigation';

import './Navigation.scss';

const Navigation = props => (
        <Link to="/">Pup</Link>
      <Navbar.Toggle />
      {!props.authenticated ? <PublicNavigation /> : <AuthenticatedNavigation {...props} />}

Navigation.defaultProps = {
  name: '',

Navigation.propTypes = {
  authenticated: PropTypes.bool.isRequired,

export default Navigation;