add a footer, move the dark/light toggle to it

This commit is contained in:
Emi Matchu 2020-09-19 22:10:52 -07:00
parent dc785b063e
commit abda9e4687
5 changed files with 109 additions and 41 deletions

View file

@ -31,6 +31,7 @@
"react": "^16.13.1",
"react-autosuggest": "^10.0.2",
"react-dom": "^16.13.1",
"react-icons": "^3.11.0",
"react-router-dom": "^5.1.2",
"react-scripts": "3.4.1",
"react-transition-group": "^4.3.0"

75
src/app/GlobalFooter.js Normal file
View file

@ -0,0 +1,75 @@
import React from "react";
import {
Box,
IconButton,
HStack,
Tooltip,
useColorMode,
} from "@chakra-ui/core";
import { EmailIcon, MoonIcon, SunIcon } from "@chakra-ui/icons";
import { SiGithub } from "react-icons/si";
function GlobalFooter() {
return (
<Box
as="footer"
display="flex"
alignItems="center"
justifyContent="flex-end"
>
<Box textAlign="center" fontSize="xs" opacity="0.75">
Images © 2000{new Date().getFullYear()} Neopets, Inc. All Rights
Reserved. Used With Permission.
</Box>
<HStack
spacing="2"
marginLeft="3"
opacity="0.75"
transition="opacity 0.2s"
_hover={{ opacity: "1" }}
_focusWithin={{ opacity: "1" }}
>
<Tooltip label="Email">
<IconButton
as="a"
href="mailto:matchu@openneo.net"
size="sm"
variant="outline"
aria-label="Email"
icon={<EmailIcon />}
/>
</Tooltip>
<Tooltip label="GitHub">
<IconButton
as="a"
href="https://github.com/matchu/impress-2020"
size="sm"
variant="outline"
aria-label="GitHub"
icon={<SiGithub />}
/>
</Tooltip>
<ColorModeButton />
</HStack>
</Box>
);
}
function ColorModeButton() {
const { colorMode, toggleColorMode } = useColorMode();
const label = colorMode === "light" ? "Dark mode" : "Light mode";
return (
<Tooltip label={label}>
<IconButton
size="sm"
variant="outline"
aria-label={label}
icon={colorMode === "light" ? <MoonIcon /> : <SunIcon />}
onClick={toggleColorMode}
/>
</Tooltip>
);
}
export default GlobalFooter;

View file

@ -9,16 +9,10 @@ import {
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 { ChevronLeftIcon, HamburgerIcon } from "@chakra-ui/icons";
import useCurrentUser from "./components/useCurrentUser";
@ -130,51 +124,26 @@ function UserNavBarSection() {
}
function NavMenu() {
const { colorMode, toggleColorMode } = useColorMode();
return (
<Menu>
<MenuButton as={NavButton} icon={<HamburgerIcon />} />
<MenuList fontSize="sm">
<MenuItem as={Link} to="/">
Home
</MenuItem>
<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}
/>
</>
<NavButton as={Link} to="/modeling">
Modeling
</NavButton>
);
}
@ -184,7 +153,11 @@ const NavButton = React.forwardRef(({ icon, ...props }, ref) => {
// 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" }}>
<Box
opacity="0.8"
_hover={{ opacity: "1" }}
_focusWithin={{ opacity: "1" }}
>
<Component size="sm" variant="outline" icon={icon} ref={ref} {...props} />
</Box>
);

View file

@ -3,10 +3,19 @@ import { Box } from "@chakra-ui/core";
import loadable from "@loadable/component";
const GlobalNavBar = loadable(() => import("./GlobalNavBar"));
const GlobalFooter = loadable(() => import("./GlobalFooter"));
function PageLayout({ children }) {
return (
<Box padding="6" paddingTop="3" maxWidth="1024px" margin="0 auto">
<Box
paddingX="6"
paddingY="3"
maxWidth="1024px"
margin="0 auto"
minHeight="100vh"
display="flex"
flexDirection="column"
>
<Box
width="100%"
marginBottom="6"
@ -15,7 +24,10 @@ function PageLayout({ children }) {
>
<GlobalNavBar />
</Box>
{children}
<Box flex="1 0 0">{children}</Box>
<Box width="100%" marginTop="12">
<GlobalFooter />
</Box>
</Box>
);
}

View file

@ -11316,6 +11316,13 @@ react-focus-lock@2.4.1:
use-callback-ref "^1.2.1"
use-sidecar "^1.0.1"
react-icons@^3.11.0:
version "3.11.0"
resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-3.11.0.tgz#2ca2903dfab8268ca18ebd8cc2e879921ec3b254"
integrity sha512-JRgiI/vdF6uyBgyZhVyYJUZAop95Sy4XDe/jmT3R/bKliFWpO/uZBwvSjWEdxwzec7SYbEPNPck0Kff2tUGM2Q==
dependencies:
camelcase "^5.0.0"
react-is@^16.12.0, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4:
version "16.13.1"
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"