139 lines
4.0 KiB
JavaScript
139 lines
4.0 KiB
JavaScript
import React, { useState } from "react";
|
|
import {
|
|
Link, Box, Flex, Button, Image, Stack, IconButton,
|
|
useColorMode, useColorModeValue
|
|
} from "@chakra-ui/react";
|
|
import { SunIcon, MoonIcon, HamburgerIcon, CloseIcon, SearchIcon, AddIcon } from "@chakra-ui/icons";
|
|
|
|
import logo from "../assets/wAIfu_20flag_20square.png";
|
|
|
|
// Navbar component code based on https://codesandbox.io/s/b22b7
|
|
|
|
const NavBar = () => {
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
|
|
const toggle = () => setIsOpen(!isOpen);
|
|
|
|
const logoBorderColor = useColorModeValue("var(--flag-color-dark-blue)", "var(--chakra-colors-whiteAlpha-800)");
|
|
|
|
return (
|
|
<NavBarContainer boxShadow="base" p="1rem">
|
|
<Link href="/" boxSize="min(48px, 100%)">
|
|
<Image
|
|
borderRadius="full"
|
|
height="100%"
|
|
border="2px"
|
|
borderColor={logoBorderColor}
|
|
src={logo}
|
|
alt="wAIfu flag logo"
|
|
/>
|
|
</Link>
|
|
|
|
<Stack direction="row">
|
|
<Box display={{ base: "block", md: "none"}}>
|
|
<ColorThemeSwitch />
|
|
</Box>
|
|
<NavToggle toggle={toggle} isOpen={isOpen} />
|
|
</Stack>
|
|
<NavMenu isOpen={isOpen} />
|
|
</NavBarContainer>
|
|
);
|
|
};
|
|
|
|
const NavToggle = ({ toggle, isOpen }) => {
|
|
return (
|
|
<IconButton
|
|
display={{ base: "block", md: "none" }}
|
|
height="auto"
|
|
colorScheme="gray"
|
|
color="gray.400"
|
|
bg="#ffffff00"
|
|
size="lg"
|
|
aria-label="Navigation menu toggle"
|
|
icon={isOpen ? <CloseIcon height="100%" /> : <HamburgerIcon height="100%" />}
|
|
onClick={toggle}>
|
|
</IconButton>
|
|
);
|
|
};
|
|
|
|
const NavItem = ({ children, to = "/", ...rest}) => {
|
|
return (
|
|
<Link href={to} {...rest}>
|
|
{children}
|
|
</Link>
|
|
);
|
|
};
|
|
|
|
const NavMenu = ({ isOpen }) => {
|
|
return (
|
|
<Box
|
|
display={{ base: isOpen ? "block" : "none", md: "block" }}
|
|
flexBasis={{ base: "100%", md: "auto" }}
|
|
height="min(48px, 100%)"
|
|
>
|
|
<Stack
|
|
spacing={8}
|
|
align="center"
|
|
justify={["center", "center", "flex-end", "flex-end"]}
|
|
direction={["column", "row", "row", "row"]}
|
|
pt={[4, 4, 0, 0]}
|
|
height="100%"
|
|
>
|
|
<NavItem to="/search">
|
|
<Button as={SearchIcon} bg="#ffffff00" boxSize="3.12rem" />
|
|
</NavItem>
|
|
<NavItem to="/create">
|
|
<Button as={AddIcon} bg="#ffffff00" boxSize="3.12rem" />
|
|
</NavItem>
|
|
<NavItem to="/about">About</NavItem>
|
|
<Box display={{ base: "none", md: "block"}}>
|
|
<ColorThemeSwitch />
|
|
</Box>
|
|
<NavItem to="/signup">
|
|
<Button size="sm" rounded="md">
|
|
Sign Up
|
|
</Button>
|
|
</NavItem>
|
|
</Stack>
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
const NavBarContainer = ({ children, ...props }) => {
|
|
return (
|
|
<Flex
|
|
as="nav"
|
|
align="center"
|
|
justify="space-between"
|
|
wrap="wrap"
|
|
width="100%"
|
|
mb={8}
|
|
p={8}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</Flex>
|
|
);
|
|
};
|
|
|
|
const ColorThemeSwitch = ({ ...props }) => {
|
|
const { colorMode, toggleColorMode } = useColorMode();
|
|
return (
|
|
<IconButton
|
|
colorScheme="gray"
|
|
color="gray.400"
|
|
bg="#ffffff00"
|
|
size="lg"
|
|
aria-label="Switch color themes"
|
|
icon={colorMode === "dark" ? <SunIcon /> : <MoonIcon />}
|
|
onClick={() => {
|
|
document.body.style.background = "";
|
|
toggleColorMode();
|
|
}}
|
|
{...props}>
|
|
</IconButton>
|
|
);
|
|
}
|
|
|
|
export default NavBar;
|