App.js

import React from 'react';
import { Route } from 'react-router-dom';
import Cookies from 'js-cookie';

import './App.css';
import Navbar from './components/Navbar';
import NewBooks from './components/NewBooks';
import MyAccount from './components/MyAccount';
import AppContext from './AppContext';
import AdminPage from './components/admin/AdminPage';

export default class App extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            user: Cookies.get('user-object') ? JSON.parse(Cookies.get('user-object')) : {},
            userLoginStatus: Cookies.get("auth-token") ? true : false, 
            setUser: (user) => {
                this.setState({user: user})
            },
            logUserIn: (authToken, authTokenExpiration, user) => {
                this.setState({userLoginStatus: true, user: user})
                Cookies.set('user-object', JSON.stringify(user))
                Cookies.set('auth-token', authToken)
                Cookies.set('auth-token-expiration', authTokenExpiration)
            },
            logUserOut: () => {
                this.setState({userLoginStatus: false})
                Cookies.remove('auth-token')
                Cookies.remove('auth-token-expiration')
            }
        }
    }

    render() {
        return (
            <div className="App">
                <AppContext.Provider value={this.state}>
                    <Navbar>
                        <Route exact path="/">
                            Welcome to the Library Management System
                        </Route>
                        <Route exact path="/about">
                            The About Page
                        </Route>
                        <Route exact path="/new-books">
                            <NewBooks />
                        </Route>
                        <Route exact path="/my-account">
                            <MyAccount />
                        </Route>
                        <Route exact path="/admin">
                            <AdminPage />
                        </Route>
                    </Navbar>
                </AppContext.Provider>
            </div>
        );
    }
}

Navbar.js

import React from 'react';
import { BrowserRouter as Router, Switch, Link } from 'react-router-dom';
import './Navbar.css';
import AppContext from "../AppContext";

const adminLink = (
    <li className="nav-item">
        <Link to="/admin" className="nav-link">
            Admin
        </Link>
    </li>
)

const userLoggedInMenu = (
    <AppContext.Consumer>
        {(context => 
            <ul className="navbar-nav ml-auto">
                {context.user.admin ? adminLink : null}
                <li className="nav-item">
                    <Link to="/my-account" className="nav-link">
                        My Account
                    </Link>
                </li>
                <li className="nav-item">
                    <Link onClick={context.logUserOut} to="/" className="nav-link">
                        Log Out
                    </Link>
                </li>
            </ul>
        )}
    </AppContext.Consumer>
)

const userLoggedOutMenu = (
    <ul className="navbar-nav ml-auto">
        <li className="nav-item">
            <Link to="/my-account" className="nav-link">
                Log In
            </Link>
        </li>
    </ul>
)

export default class Navbar extends React.Component {
    render() {
        return (
            <div>
                <AppContext.Consumer>
                    {(context) => (
                        <Router>
                            <nav className="navbar navbar-expand-lg navbar-dark bg-dark">
                                <div className="container">
                                    <Link to="/" className="navbar-brand">
                                        Library Management System
                                    </Link>
                                    <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                                        <span className="navbar-toggler-icon"></span>
                                    </button>

                                    <div className="collapse navbar-collapse" id="navbarSupportedContent">
                                        <ul className="navbar-nav mr-auto">
                                            <li className="nav-item">
                                                <Link to="/new-books" className="nav-link">
                                                    New Books
                                                </Link>
                                            </li>
                                        </ul>
                                        {context.userLoginStatus ? userLoggedInMenu : userLoggedOutMenu}
                                    </div>
                                </div>
                            </nav>

                            <main className="container">
                                <Switch>
                                    {this.props.children}
                                </Switch>
                            </main>
                        </Router>
                    )}
                </AppContext.Consumer>
            </div>
        );
    }
}