add a footer, move the dark/light toggle to it
This commit is contained in:
parent
dc785b063e
commit
abda9e4687
5 changed files with 109 additions and 41 deletions
|
|
@ -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
75
src/app/GlobalFooter.js
Normal 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;
|
||||
|
|
@ -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>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
Loading…
Reference in a new issue