code-split nav bar out
This commit is contained in:
parent
0fa378ec6c
commit
0975a94511
2 changed files with 197 additions and 185 deletions
193
src/app/GlobalNavBar.js
Normal file
193
src/app/GlobalNavBar.js
Normal file
|
|
@ -0,0 +1,193 @@
|
|||
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 GlobalNavBar() {
|
||||
const navStyle = useBreakpointValue({ base: "menu", md: "buttons" });
|
||||
|
||||
return (
|
||||
<Box display="flex" alignItems="center" flexWrap="wrap">
|
||||
<HStack alignItems="center" spacing="2" marginRight="4">
|
||||
<HomeLink />
|
||||
{navStyle === "menu" && <NavMenu />}
|
||||
{navStyle === "buttons" && <NavButtons />}
|
||||
</HStack>
|
||||
<Box marginLeft="auto">
|
||||
<UserNavBarSection />
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
function HomeLink() {
|
||||
const { pathname } = useLocation();
|
||||
const isHomePage = pathname === "/";
|
||||
|
||||
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" }}
|
||||
>
|
||||
<Box
|
||||
position="absolute"
|
||||
right="100%"
|
||||
opacity={isHomePage ? "0" : "1"}
|
||||
transform={isHomePage ? "translateX(3px)" : "none"}
|
||||
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 && (
|
||||
<NavButton
|
||||
as={Link}
|
||||
to={`/user/${id}/items`}
|
||||
size="sm"
|
||||
variant="outline"
|
||||
>
|
||||
Items
|
||||
</NavButton>
|
||||
)}
|
||||
<NavButton onClick={() => logout({ returnTo: window.location.origin })}>
|
||||
Log out
|
||||
</NavButton>
|
||||
</HStack>
|
||||
);
|
||||
} else {
|
||||
return <NavButton onClick={() => loginWithRedirect()}>Log in</NavButton>;
|
||||
}
|
||||
}
|
||||
|
||||
function NavMenu() {
|
||||
const { colorMode, toggleColorMode } = useColorMode();
|
||||
|
||||
return (
|
||||
<Menu>
|
||||
<MenuButton as={NavButton} icon={<HamburgerIcon />} />
|
||||
<MenuList fontSize="sm">
|
||||
<MenuItem as={Link} to="/modeling">
|
||||
Modeling
|
||||
</MenuItem>
|
||||
<MenuItem onClick={toggleColorMode}>
|
||||
{colorMode === "light" ? (
|
||||
<Box display="flex" alignItems="center">
|
||||
<Box>Dark mode</Box>
|
||||
<MoonIcon marginLeft="2" />
|
||||
</Box>
|
||||
) : (
|
||||
<Box display="flex" alignItems="center">
|
||||
<Box>Light mode</Box>
|
||||
<SunIcon marginLeft="2" />
|
||||
</Box>
|
||||
)}
|
||||
</MenuItem>
|
||||
</MenuList>
|
||||
</Menu>
|
||||
);
|
||||
}
|
||||
|
||||
function NavButtons() {
|
||||
const { colorMode, toggleColorMode } = useColorMode();
|
||||
|
||||
return (
|
||||
<>
|
||||
<NavButton as={Link} to="/modeling">
|
||||
Modeling
|
||||
</NavButton>
|
||||
<NavButton
|
||||
size="sm"
|
||||
variant="outline"
|
||||
aria-label={
|
||||
colorMode === "light" ? "Switch to dark mode" : "Switch to light mode"
|
||||
}
|
||||
icon={colorMode === "light" ? <MoonIcon /> : <SunIcon />}
|
||||
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 (
|
||||
<Box opacity="0.8" _hover={{ opacity: "1" }} _focus={{ opacity: "1" }}>
|
||||
<Component size="sm" variant="outline" icon={icon} ref={ref} {...props} />
|
||||
</Box>
|
||||
);
|
||||
});
|
||||
|
||||
export default GlobalNavBar;
|
||||
|
|
@ -1,204 +1,23 @@
|
|||
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 { Box } from "@chakra-ui/core";
|
||||
import loadable from "@loadable/component";
|
||||
|
||||
import useCurrentUser from "./components/useCurrentUser";
|
||||
|
||||
import HomeLinkIcon from "../images/home-link-icon.png";
|
||||
import HomeLinkIcon2x from "../images/home-link-icon@2x.png";
|
||||
const GlobalNavBar = loadable(() => import("./GlobalNavBar"));
|
||||
|
||||
function PageLayout({ children }) {
|
||||
const navStyle = useBreakpointValue({ base: "menu", md: "buttons" });
|
||||
|
||||
return (
|
||||
<Box padding="6" paddingTop="3" maxWidth="1024px" margin="0 auto">
|
||||
<Box
|
||||
width="100%"
|
||||
display="flex"
|
||||
alignItems="center"
|
||||
flexWrap="wrap"
|
||||
marginBottom="6"
|
||||
// Leave space while content is still loading
|
||||
minHeight="2rem"
|
||||
>
|
||||
<HStack alignItems="center" spacing="2" marginRight="4">
|
||||
<HomeLink />
|
||||
{navStyle === "menu" && <NavMenu />}
|
||||
{navStyle === "buttons" && <NavButtons />}
|
||||
</HStack>
|
||||
<Box marginLeft="auto">
|
||||
<UserNavBarSection />
|
||||
</Box>
|
||||
<GlobalNavBar />
|
||||
</Box>
|
||||
{children}
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
function HomeLink() {
|
||||
const { pathname } = useLocation();
|
||||
const isHomePage = pathname === "/";
|
||||
|
||||
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" }}
|
||||
>
|
||||
<Box
|
||||
position="absolute"
|
||||
right="100%"
|
||||
opacity={isHomePage ? "0" : "1"}
|
||||
transform={isHomePage ? "translateX(3px)" : "none"}
|
||||
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 && (
|
||||
<NavButton
|
||||
as={Link}
|
||||
to={`/user/${id}/items`}
|
||||
size="sm"
|
||||
variant="outline"
|
||||
>
|
||||
Items
|
||||
</NavButton>
|
||||
)}
|
||||
<NavButton onClick={() => logout({ returnTo: window.location.origin })}>
|
||||
Log out
|
||||
</NavButton>
|
||||
</HStack>
|
||||
);
|
||||
} else {
|
||||
return <NavButton onClick={() => loginWithRedirect()}>Log in</NavButton>;
|
||||
}
|
||||
}
|
||||
|
||||
function NavMenu() {
|
||||
const { colorMode, toggleColorMode } = useColorMode();
|
||||
|
||||
return (
|
||||
<Menu>
|
||||
<MenuButton as={NavButton} icon={<HamburgerIcon />} />
|
||||
<MenuList fontSize="sm">
|
||||
<MenuItem as={Link} to="/modeling">
|
||||
Modeling
|
||||
</MenuItem>
|
||||
<MenuItem onClick={toggleColorMode}>
|
||||
{colorMode === "light" ? (
|
||||
<Box display="flex" alignItems="center">
|
||||
<Box>Dark mode</Box>
|
||||
<MoonIcon marginLeft="2" />
|
||||
</Box>
|
||||
) : (
|
||||
<Box display="flex" alignItems="center">
|
||||
<Box>Light mode</Box>
|
||||
<SunIcon marginLeft="2" />
|
||||
</Box>
|
||||
)}
|
||||
</MenuItem>
|
||||
</MenuList>
|
||||
</Menu>
|
||||
);
|
||||
}
|
||||
|
||||
function NavButtons() {
|
||||
const { colorMode, toggleColorMode } = useColorMode();
|
||||
|
||||
return (
|
||||
<>
|
||||
<NavButton as={Link} to="/modeling">
|
||||
Modeling
|
||||
</NavButton>
|
||||
<NavButton
|
||||
size="sm"
|
||||
variant="outline"
|
||||
aria-label={
|
||||
colorMode === "light" ? "Switch to dark mode" : "Switch to light mode"
|
||||
}
|
||||
icon={colorMode === "light" ? <MoonIcon /> : <SunIcon />}
|
||||
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 (
|
||||
<Box opacity="0.8" _hover={{ opacity: "1" }} _focus={{ opacity: "1" }}>
|
||||
<Component size="sm" variant="outline" icon={icon} ref={ref} {...props} />
|
||||
</Box>
|
||||
);
|
||||
});
|
||||
|
||||
export default PageLayout;
|
||||
|
|
|
|||
Loading…
Reference in a new issue