From c114660b9f6d5f01ce94cd5ea71909ae93b8e03e Mon Sep 17 00:00:00 2001
From: Paul Pan <i@0x7f.app>
Date: Sat, 16 Mar 2024 22:50:44 +0800
Subject: [PATCH] feat: add simple nav menu

---
 src/components/Header.tsx | 40 +++++++++++++++++++++++++++++----------
 src/pages/HomePage.tsx    |  8 ++++----
 2 files changed, 34 insertions(+), 14 deletions(-)

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index be8b04c..4e04d05 100644
--- a/src/components/Header.tsx
+++ b/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,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>
     );
diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx
index be49ec4..58ac20c 100644
--- a/src/pages/HomePage.tsx
+++ b/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>
     );
 }