feat: add simple nav menu

src/components/Header.tsx

@@ -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,18 +82,36 @@ 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">
+                <Stack direction="row" spacing={4} align="center" justify="center">
                     {logo}
+                    {navMenu}
+                </Stack>
 
-                <Flex alignItems="center">
-                    <Stack direction="row" spacing={4}>
+                <Stack direction="row" spacing={4} align="center" justify="center">
                     {switchTheme}
                     {menu}
                 </Stack>
             </Flex>
-            </Flex>
         </Box>
     );
 }

src/pages/HomePage.tsx

@@ -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>
     );
 }