2020-09-10 02:32:14 -07:00
|
|
|
import React from "react";
|
2020-09-20 19:36:51 -07:00
|
|
|
import { Box, Button, HStack, IconButton } from "@chakra-ui/core";
|
2020-09-10 02:32:14 -07:00
|
|
|
import { Link, useLocation } from "react-router-dom";
|
|
|
|
import { useAuth0 } from "@auth0/auth0-react";
|
2020-09-20 19:36:51 -07:00
|
|
|
import { ChevronLeftIcon } from "@chakra-ui/icons";
|
2020-09-10 02:32:14 -07:00
|
|
|
|
|
|
|
import useCurrentUser from "./components/useCurrentUser";
|
|
|
|
|
|
|
|
import HomeLinkIcon from "../images/home-link-icon.png";
|
|
|
|
import HomeLinkIcon2x from "../images/home-link-icon@2x.png";
|
|
|
|
|
2020-09-21 03:08:24 -07:00
|
|
|
function GlobalHeader() {
|
2020-09-20 19:36:51 -07:00
|
|
|
const { pathname } = useLocation();
|
|
|
|
const isHomePage = pathname === "/";
|
2020-09-10 02:32:14 -07:00
|
|
|
|
|
|
|
return (
|
|
|
|
<Box display="flex" alignItems="center" flexWrap="wrap">
|
2020-09-20 20:13:00 -07:00
|
|
|
<HomeLink showArrow={!isHomePage} marginRight="2" />
|
2020-09-20 19:36:51 -07:00
|
|
|
<Box
|
|
|
|
display="flex"
|
|
|
|
alignItems="center"
|
|
|
|
opacity={isHomePage ? "0" : "1"}
|
|
|
|
transition="0.2s opacity"
|
|
|
|
>
|
2020-09-20 20:13:00 -07:00
|
|
|
<DressToImpressTitle />
|
2020-09-20 19:36:51 -07:00
|
|
|
</Box>
|
2020-09-10 02:32:14 -07:00
|
|
|
<Box marginLeft="auto">
|
|
|
|
<UserNavBarSection />
|
|
|
|
</Box>
|
|
|
|
</Box>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2020-09-20 20:13:00 -07:00
|
|
|
function HomeLink({ showArrow, ...props }) {
|
2020-09-10 02:32:14 -07:00
|
|
|
return (
|
|
|
|
<Box
|
|
|
|
as={Link}
|
|
|
|
to="/"
|
|
|
|
display="flex"
|
|
|
|
alignItems="center"
|
|
|
|
position="relative"
|
|
|
|
role="group"
|
|
|
|
transition="all 0.2s"
|
|
|
|
opacity="0.8"
|
|
|
|
_hover={{ transform: "scale(1.1)", opacity: "1" }}
|
|
|
|
_focus={{ transform: "scale(1.1)", opacity: "1" }}
|
2020-09-20 20:13:00 -07:00
|
|
|
{...props}
|
2020-09-10 02:32:14 -07:00
|
|
|
>
|
|
|
|
<Box
|
|
|
|
position="absolute"
|
|
|
|
right="100%"
|
2020-09-20 19:36:51 -07:00
|
|
|
opacity={showArrow ? "1" : "0"}
|
|
|
|
transform={showArrow ? "none" : "translateX(3px)"}
|
2020-09-10 02:32:14 -07:00
|
|
|
transition="all 0.2s"
|
|
|
|
>
|
|
|
|
<ChevronLeftIcon />
|
|
|
|
</Box>
|
|
|
|
<Box
|
|
|
|
as="img"
|
|
|
|
src={HomeLinkIcon}
|
|
|
|
srcSet={`${HomeLinkIcon} 1x, ${HomeLinkIcon2x} 2x`}
|
|
|
|
alt=""
|
|
|
|
height="2em"
|
|
|
|
width="2em"
|
|
|
|
borderRadius="lg"
|
|
|
|
boxShadow="md"
|
|
|
|
/>
|
|
|
|
<Box
|
|
|
|
height="2em"
|
|
|
|
width="2em"
|
|
|
|
position="absolute"
|
|
|
|
top="0"
|
|
|
|
left="0"
|
|
|
|
right="0"
|
|
|
|
bottom="0"
|
|
|
|
borderRadius="lg"
|
|
|
|
transition="border 0.2s"
|
|
|
|
/>
|
|
|
|
</Box>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
function UserNavBarSection() {
|
|
|
|
const { isLoading, isAuthenticated, loginWithRedirect, logout } = useAuth0();
|
|
|
|
const { id, username } = useCurrentUser();
|
|
|
|
|
|
|
|
if (isLoading) {
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
|
|
|
|
if (isAuthenticated) {
|
|
|
|
return (
|
|
|
|
<HStack align="center" spacing="2">
|
|
|
|
{username && (
|
|
|
|
<Box fontSize="sm" textAlign="right">
|
|
|
|
Hi, {username}!
|
|
|
|
</Box>
|
|
|
|
)}
|
|
|
|
{id && (
|
2020-09-20 19:36:51 -07:00
|
|
|
<NavButton as={Link} to={`/user/${id}/items`}>
|
2020-09-10 02:32:14 -07:00
|
|
|
Items
|
|
|
|
</NavButton>
|
|
|
|
)}
|
2020-09-20 19:36:51 -07:00
|
|
|
<NavButton as={Link} to="/modeling">
|
|
|
|
Modeling
|
|
|
|
</NavButton>
|
2020-09-10 02:32:14 -07:00
|
|
|
<NavButton onClick={() => logout({ returnTo: window.location.origin })}>
|
|
|
|
Log out
|
|
|
|
</NavButton>
|
|
|
|
</HStack>
|
|
|
|
);
|
|
|
|
} else {
|
2020-09-20 19:36:51 -07:00
|
|
|
return (
|
|
|
|
<HStack align="center" spacing="2">
|
|
|
|
<NavButton as={Link} to="/modeling">
|
2020-09-10 02:32:14 -07:00
|
|
|
Modeling
|
2020-09-20 19:36:51 -07:00
|
|
|
</NavButton>
|
|
|
|
<NavButton onClick={() => loginWithRedirect()}>Log in</NavButton>
|
|
|
|
</HStack>
|
|
|
|
);
|
|
|
|
}
|
2020-09-10 02:32:14 -07:00
|
|
|
}
|
|
|
|
|
2020-09-20 19:36:51 -07:00
|
|
|
function DressToImpressTitle(props) {
|
2020-09-10 02:32:14 -07:00
|
|
|
return (
|
2020-09-20 19:36:51 -07:00
|
|
|
<Box
|
|
|
|
fontFamily="Delicious"
|
|
|
|
fontWeight="bold"
|
|
|
|
fontSize="2xl"
|
|
|
|
display={{ base: "none", sm: "block" }}
|
|
|
|
{...props}
|
|
|
|
>
|
|
|
|
Dress to Impress
|
|
|
|
</Box>
|
2020-09-10 02:32:14 -07:00
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
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 (
|
2020-09-19 22:10:52 -07:00
|
|
|
<Box
|
|
|
|
opacity="0.8"
|
|
|
|
_hover={{ opacity: "1" }}
|
|
|
|
_focusWithin={{ opacity: "1" }}
|
|
|
|
>
|
2020-09-10 02:32:14 -07:00
|
|
|
<Component size="sm" variant="outline" icon={icon} ref={ref} {...props} />
|
|
|
|
</Box>
|
|
|
|
);
|
|
|
|
});
|
|
|
|
|
2020-09-21 03:08:24 -07:00
|
|
|
export default GlobalHeader;
|