ryanbelke · April 27, 2020 02:31
diff --git a/Layout.js b/Layout.js
 /* /components/Layout.js */

 import React, { useContext } from "react";
 import Head from "next/head";
 import Link from "next/link";
 import { Container, Nav, NavItem } from "reactstrap";

 import { logout } from "../lib/auth";
 import AuthContext from "../context/appContext";
 const Layout = (props) => {

  const title = "Welcome to Nextjs";

  const { user, setUser } = useContext(AuthContext);

  return (
    <div>
      <Head>
        <title>{title}</title>
        <meta charSet="utf-8" />
        <meta name="viewport" content="initial-scale=1.0, width=device-width" />
        <link
          rel="stylesheet"
          href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
          integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
          crossOrigin="anonymous"
        />
        <script src="https://js.stripe.com/v3" />
      </Head>
      <header>
        <style jsx>
          {`
            a {
              color: white;
            }
            h5 {
              color: white;
              padding-top: 11px;
            }
          `}
        </style>
        <Nav className="navbar navbar-dark bg-dark">
          <NavItem>
            <Link href="/">
              <a className="navbar-brand">Home</a>
            </Link>
          </NavItem>

          <NavItem className="ml-auto">
            {user ? (
              <h5>{user.username}</h5>
            ) : (
              <Link href="/signup">
                <a className="nav-link"> Sign up</a>
              </Link>
            )}
          </NavItem>
          <NavItem>
            {user ? (
              <Link href="/">
                <a
                  className="nav-link"
                  onClick={() => {
                    logout();
                    setUser(null);
                  }}
                >
                  Logout
                </a>
              </Link>
            ) : (
              <Link href="/signin">
                <a className="nav-link">Sign in</a>
              </Link>
            )}
          </NavItem>
        </Nav>
      </header>
      <Container>{props.children}</Container>
    </div>
  );
 };

 export default Layout;
	/* /components/Layout.js */

	import React, { useContext } from "react";
	import Head from "next/head";
	import Link from "next/link";
	import { Container, Nav, NavItem } from "reactstrap";

	import { logout } from "../lib/auth";
	import AuthContext from "../context/appContext";
	const Layout = (props) => {

	const title = "Welcome to Nextjs";

	const { user, setUser } = useContext(AuthContext);

	return (
	<div>
	<Head>
	<title>{title}</title>
	<meta charSet="utf-8" />
	<meta name="viewport" content="initial-scale=1.0, width=device-width" />
	<link
	rel="stylesheet"
	href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
	integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
	crossOrigin="anonymous"
	/>
	<script src="https://js.stripe.com/v3" />
	</Head>
	<header>
	<style jsx>
	{`
	a {
	color: white;
	}
	h5 {
	color: white;
	padding-top: 11px;
	}
	`}
	</style>
	<Nav className="navbar navbar-dark bg-dark">
	<NavItem>
	<Link href="/">
	<a className="navbar-brand">Home</a>
	</Link>
	</NavItem>

	<NavItem className="ml-auto">
	{user ? (
	<h5>{user.username}</h5>
	) : (
	<Link href="/signup">
	<a className="nav-link"> Sign up</a>
	</Link>
	)}
	</NavItem>
	<NavItem>
	{user ? (
	<Link href="/">
	<a
	className="nav-link"
	onClick={() => {
	logout();
	setUser(null);
	}}
	>
	Logout
	</a>
	</Link>
	) : (
	<Link href="/signin">
	<a className="nav-link">Sign in</a>
	</Link>
	)}
	</NavItem>
	</Nav>
	</header>
	<Container>{props.children}</Container>
	</div>
	);
	};

	export default Layout;