feat: add simple nav menu
This commit is contained in:
parent
68199bd7ef
commit
c114660b9f
@ -4,6 +4,7 @@ import {
|
||||
Button,
|
||||
Center,
|
||||
Flex,
|
||||
IconButton,
|
||||
Link,
|
||||
Menu,
|
||||
MenuButton,
|
||||
@ -17,14 +18,15 @@ import {
|
||||
} from "@chakra-ui/react";
|
||||
import { Link as ReactRouterLink } from "react-router-dom";
|
||||
|
||||
import { MoonIcon, SunIcon } from "@chakra-ui/icons";
|
||||
import { HamburgerIcon, MoonIcon, SunIcon } from "@chakra-ui/icons";
|
||||
import { IoGolfOutline, IoHomeOutline, IoStatsChartOutline } from "react-icons/io5";
|
||||
import { createAvatar } from "@dicebear/core";
|
||||
import { shapes } from "@dicebear/collection";
|
||||
|
||||
import { useProfileQuery } from "../app/services/user";
|
||||
|
||||
export default function Header() {
|
||||
const { colorMode, toggleColorMode } = useColorMode();
|
||||
const { toggleColorMode } = useColorMode();
|
||||
const { data: profile, isError } = useProfileQuery(0);
|
||||
|
||||
const avatar = createAvatar(shapes, { seed: (!isError && profile?.body.email) || "default" });
|
||||
@ -68,7 +70,7 @@ export default function Header() {
|
||||
</Menu>
|
||||
);
|
||||
|
||||
const switchTheme = <Button onClick={toggleColorMode}>{colorMode === "light" ? <MoonIcon /> : <SunIcon />}</Button>;
|
||||
const switchTheme = <Button onClick={toggleColorMode}>{useColorModeValue(<MoonIcon />, <SunIcon />)}</Button>;
|
||||
|
||||
const logo = (
|
||||
<Box>
|
||||
@ -80,17 +82,35 @@ export default function Header() {
|
||||
</Box>
|
||||
);
|
||||
|
||||
const navMenu = (
|
||||
<Menu>
|
||||
<MenuButton as={IconButton} aria-label="Options" icon={<HamburgerIcon />} variant="outline" />
|
||||
<MenuList>
|
||||
<MenuItem icon={<IoHomeOutline />} as={ReactRouterLink} to={"/home"}>
|
||||
Home
|
||||
</MenuItem>
|
||||
<MenuItem icon={<IoGolfOutline />} as={ReactRouterLink} to={"/problem"}>
|
||||
Problem
|
||||
</MenuItem>
|
||||
<MenuItem icon={<IoStatsChartOutline />} as={ReactRouterLink} to={"/profile"}>
|
||||
Profile
|
||||
</MenuItem>
|
||||
</MenuList>
|
||||
</Menu>
|
||||
);
|
||||
|
||||
return (
|
||||
<Box as="nav" role="navigation" w="100%" bg={useColorModeValue("gray.100", "gray.900")} px={4}>
|
||||
<Flex h={16} alignItems="center" justifyContent="space-between">
|
||||
{logo}
|
||||
<Stack direction="row" spacing={4} align="center" justify="center">
|
||||
{logo}
|
||||
{navMenu}
|
||||
</Stack>
|
||||
|
||||
<Flex alignItems="center">
|
||||
<Stack direction="row" spacing={4}>
|
||||
{switchTheme}
|
||||
{menu}
|
||||
</Stack>
|
||||
</Flex>
|
||||
<Stack direction="row" spacing={4} align="center" justify="center">
|
||||
{switchTheme}
|
||||
{menu}
|
||||
</Stack>
|
||||
</Flex>
|
||||
</Box>
|
||||
);
|
||||
|
@ -1,9 +1,9 @@
|
||||
import { Heading } from "@chakra-ui/react";
|
||||
import { Center, Heading } from "@chakra-ui/react";
|
||||
|
||||
export default function HomePage() {
|
||||
return (
|
||||
<>
|
||||
<Heading>Hello World!</Heading>
|
||||
</>
|
||||
<Center h="40vh">
|
||||
<Heading>Woo Online Judge</Heading>
|
||||
</Center>
|
||||
);
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user