import React from "react";
import {
Box,
Button,
HStack,
IconButton,
Menu,
MenuButton,
MenuList,
MenuItem,
useBreakpointValue,
} from "@chakra-ui/core";
import { HamburgerIcon } from "@chakra-ui/icons";
import { Link, useLocation } from "react-router-dom";
import { useAuth0 } from "@auth0/auth0-react";
import { ChevronLeftIcon } 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 GlobalHeader() {
return (
);
}
function HomeLink(props) {
const { pathname } = useLocation();
const isHomePage = pathname === "/";
return (
Dress to Impress
);
}
function UserNavBarSection() {
const { isLoading, isAuthenticated, loginWithRedirect, logout } = useAuth0();
const { id, username } = useCurrentUser();
if (isLoading) {
return null;
}
if (isAuthenticated) {
return (
{username && (
Hi, {username}!
)}
{id && (
Items
)}
Modeling
logout({ returnTo: window.location.origin })}>
Log out
);
} else {
return (
Modeling
loginWithRedirect()}>Log in
);
}
}
function NavLinksList({ children }) {
return (
<>
{React.Children.map(children, (c) =>
React.cloneElement(c, { listVariant: "buttons" })
)}
>
);
}
function NavLinkItem({ listVariant, ...props }) {
if (listVariant === "menu") {
return ;
} else {
return ;
}
}
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 GlobalHeader;