add Modeling link, permanent home link, subtleness

This commit is contained in:
Emi Matchu 2020-09-07 19:46:11 -07:00
parent 8bdaad9060
commit bebb8e2d11

View file

@ -1,6 +1,6 @@
import React from "react"; import React from "react";
import { Box, Button, HStack, IconButton, useColorMode } from "@chakra-ui/core"; import { Box, Button, HStack, IconButton, useColorMode } from "@chakra-ui/core";
import { Link } from "react-router-dom"; import { Link, useLocation } from "react-router-dom";
import { useAuth0 } from "@auth0/auth0-react"; import { useAuth0 } from "@auth0/auth0-react";
import { ChevronLeftIcon, MoonIcon, SunIcon } from "@chakra-ui/icons"; import { ChevronLeftIcon, MoonIcon, SunIcon } from "@chakra-ui/icons";
@ -9,7 +9,7 @@ import useCurrentUser from "./components/useCurrentUser";
import HomeLinkIcon from "../images/home-link-icon.png"; import HomeLinkIcon from "../images/home-link-icon.png";
import HomeLinkIcon2x from "../images/home-link-icon@2x.png"; import HomeLinkIcon2x from "../images/home-link-icon@2x.png";
function PageLayout({ children, hideHomeLink }) { function PageLayout({ children }) {
return ( return (
<Box padding="6" paddingTop="3" maxWidth="1024px" margin="0 auto"> <Box padding="6" paddingTop="3" maxWidth="1024px" margin="0 auto">
<Box <Box
@ -21,8 +21,15 @@ function PageLayout({ children, hideHomeLink }) {
// Leave space while content is still loading // Leave space while content is still loading
minHeight="2rem" minHeight="2rem"
> >
{!hideHomeLink && <HomeLink />} <HStack alignItems="center" spacing="2" marginRight="4">
<UserLoginLogout marginLeft="auto" /> <HomeLink />
<NavButton as={Link} to="/modeling">
Modeling
</NavButton>
</HStack>
<Box marginLeft="auto">
<UserNavBarSection />
</Box>
</Box> </Box>
{children} {children}
</Box> </Box>
@ -30,6 +37,9 @@ function PageLayout({ children, hideHomeLink }) {
} }
function HomeLink() { function HomeLink() {
const { pathname } = useLocation();
const isHomePage = pathname === "/";
return ( return (
<Box <Box
as={Link} as={Link}
@ -38,11 +48,18 @@ function HomeLink() {
alignItems="center" alignItems="center"
position="relative" position="relative"
role="group" role="group"
transition="transform 0.2s" transition="all 0.2s"
_hover={{ transform: "scale(1.1)" }} opacity="0.8"
_focus={{ outline: "0", transform: "scale(1.1)" }} _hover={{ transform: "scale(1.1)", opacity: "1" }}
_focus={{ transform: "scale(1.1)", opacity: "1" }}
> >
<Box position="absolute" right="100%"> <Box
position="absolute"
right="100%"
opacity={isHomePage ? "0" : "1"}
transform={isHomePage ? "translateX(3px)" : "none"}
transition="all 0.2s"
>
<ChevronLeftIcon /> <ChevronLeftIcon />
</Box> </Box>
<Box <Box
@ -65,13 +82,12 @@ function HomeLink() {
bottom="0" bottom="0"
borderRadius="lg" borderRadius="lg"
transition="border 0.2s" transition="border 0.2s"
_groupFocus={{ border: "2px", borderColor: "green.400" }}
/> />
</Box> </Box>
); );
} }
function UserLoginLogout(props) { function UserNavBarSection() {
const { isLoading, isAuthenticated, loginWithRedirect, logout } = useAuth0(); const { isLoading, isAuthenticated, loginWithRedirect, logout } = useAuth0();
const { id, username } = useCurrentUser(); const { id, username } = useCurrentUser();
@ -81,7 +97,7 @@ function UserLoginLogout(props) {
if (isAuthenticated) { if (isAuthenticated) {
return ( return (
<HStack align="center" spacing="2" {...props}> <HStack align="center" spacing="2">
{username && ( {username && (
<Box fontSize="sm" textAlign="right"> <Box fontSize="sm" textAlign="right">
Hi, {username}! Hi, {username}!
@ -89,31 +105,25 @@ function UserLoginLogout(props) {
)} )}
<ColorModeToggleButton /> <ColorModeToggleButton />
{id && ( {id && (
<Button <NavButton
as={Link} as={Link}
to={`/user/${id}/items`} to={`/user/${id}/items`}
size="sm" size="sm"
variant="outline" variant="outline"
> >
Items Items
</Button> </NavButton>
)} )}
<Button <NavButton onClick={() => logout({ returnTo: window.location.origin })}>
size="sm"
variant="outline"
onClick={() => logout({ returnTo: window.location.origin })}
>
Log out Log out
</Button> </NavButton>
</HStack> </HStack>
); );
} else { } else {
return ( return (
<HStack align="center" spacing="2" {...props}> <HStack align="center" spacing="2">
<ColorModeToggleButton /> <ColorModeToggleButton />
<Button size="sm" variant="outline" onClick={() => loginWithRedirect()}> <NavButton onClick={() => loginWithRedirect()}>Log in</NavButton>
Log in
</Button>
</HStack> </HStack>
); );
} }
@ -123,16 +133,28 @@ function ColorModeToggleButton() {
const { colorMode, toggleColorMode } = useColorMode(); const { colorMode, toggleColorMode } = useColorMode();
return ( return (
<IconButton <NavButton
kind="IconButton"
size="sm"
variant="outline"
aria-label={ aria-label={
colorMode === "light" ? "Switch to dark mode" : "Switch to light mode" colorMode === "light" ? "Switch to dark mode" : "Switch to light mode"
} }
icon={colorMode === "light" ? <MoonIcon /> : <SunIcon />} icon={colorMode === "light" ? <MoonIcon /> : <SunIcon />}
onClick={toggleColorMode} onClick={toggleColorMode}
variant="outline"
size="sm"
/> />
); );
} }
function NavButton({ kind = "Button", ...props }) {
const Component = kind === "IconButton" ? IconButton : Button;
return (
// Opacity is in a separate Box, to avoid overriding the built-in Button
// hover/focus states.
<Box opacity="0.8" _hover={{ opacity: "1" }} _focus={{ opacity: "1" }}>
<Component size="sm" variant="outline" {...props} />
</Box>
);
}
export default PageLayout; export default PageLayout;