import React from "react"; import { Box, Button, HStack, IconButton, Menu, MenuButton, MenuList, MenuItem, } from "@chakra-ui/react"; 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 { loginWithRedirect, logout } = useAuth0(); const { isLoading, isLoggedIn, id, username } = useCurrentUser(); if (isLoading) { return null; } if (isLoggedIn) { return ( {username && ( Hi, {username}! )} {id && ( Lists )} Outfits Modeling logout({ returnTo: window.location.origin })} > Log out ); } else { return ( Modeling loginWithRedirect()}>Log in ); } } /** * Renders the given children as a dropdown menu or as a list * of buttons, depending on the screen size. * * It actually renders both, and shows/hides them by media query! */ function NavLinksList({ children }) { return ( <> } /> {React.Children.map(children, (c) => ( ))} {React.Children.map(children, (c) => ( ))} ); } function NavLinkItem() { throw new Error( `NavLinkItem should only be rendered in a NavLinksList, which should ` + `render it as both a MenuItem or NavButton element. That way, we can ` + `show the best layout depending on a CSS media query!` ); } 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;