import React from "react";
import {
Box,
Button,
HStack,
IconButton,
Menu,
MenuButton,
MenuItem,
MenuList,
useBreakpointValue,
useColorMode,
} from "@chakra-ui/core";
import { Link, useLocation } from "react-router-dom";
import { useAuth0 } from "@auth0/auth0-react";
import {
ChevronLeftIcon,
HamburgerIcon,
MoonIcon,
SunIcon,
} from "@chakra-ui/icons";
import useCurrentUser from "./components/useCurrentUser";
import HomeLinkIcon from "../images/home-link-icon.png";
import HomeLinkIcon2x from "../images/home-link-icon@2x.png";
function PageLayout({ children }) {
const navStyle = useBreakpointValue({ base: "menu", md: "buttons" });
return (
{navStyle === "menu" && }
{navStyle === "buttons" && }
{children}
);
}
function HomeLink() {
const { pathname } = useLocation();
const isHomePage = pathname === "/";
return (
);
}
function UserNavBarSection() {
const { isLoading, isAuthenticated, loginWithRedirect, logout } = useAuth0();
const { id, username } = useCurrentUser();
if (isLoading) {
return null;
}
if (isAuthenticated) {
return (
{username && (
Hi, {username}!
)}
{id && (
Items
)}
logout({ returnTo: window.location.origin })}>
Log out
);
} else {
return loginWithRedirect()}>Log in;
}
}
function NavMenu() {
const { colorMode, toggleColorMode } = useColorMode();
return (
);
}
function NavButtons() {
const { colorMode, toggleColorMode } = useColorMode();
return (
<>
Modeling
: }
onClick={toggleColorMode}
/>
>
);
}
const NavButton = React.forwardRef(({ icon, ...props }, ref) => {
const Component = icon ? IconButton : Button;
// Opacity is in a separate Box, to avoid overriding the built-in Button
// hover/focus states.
return (
);
});
export default PageLayout;