Last active
May 7, 2020 00:21
-
-
Save ryanbelke/238e247267a4e8016fb7b60cb843c264 to your computer and use it in GitHub Desktop.
new layout component to use our logged in user and display name in header
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* /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 AppContext from "../context/AppContext"; | |
| const Layout = (props) => { | |
| const title = "Welcome to Nextjs"; | |
| const { user, setUser } = useContext(AppContext); | |
| 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="/register"> | |
| <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="/login"> | |
| <a className="nav-link">Sign in</a> | |
| </Link> | |
| )} | |
| </NavItem> | |
| </Nav> | |
| </header> | |
| <Container>{props.children}</Container> | |
| </div> | |
| ); | |
| }; | |
| export default Layout; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment