header updated, added menu button and drawer

src/components/header.tsx

@@ -1,13 +1,90 @@
-import { Box, Flex, Image, } from '@chakra-ui/react';
+import { Box, Flex, Image, VStack, Text, Link } from '@chakra-ui/react';
-import {colors} from '../colors';
+import { GiHamburgerMenu } from "react-icons/gi";
+import { colors } from '../colors';
+import { useState } from 'react';
+import {
+    DrawerBackdrop,
+    DrawerBody,
+    DrawerCloseTrigger,
+    DrawerContent,
+    DrawerHeader,
+    DrawerRoot,
+    DrawerTitle,
+} from '@/components/ui/drawer';
+
+interface HeaderProps {
+    showMenu?: boolean;
+}
+
+function Header({ showMenu = false }: HeaderProps) {
+    const [isDrawerOpen, setIsDrawerOpen] = useState(false);
+
+    const menuItems = [
+        { label: '40+常見健康問題', href: '#health-issues' },
+        { label: '營萃護心油四大優勢', href: '#advantages' },
+        { label: '護心食譜', href: '#recipes' },
+        { label: '更多食用油健康真相', href: '#truth' },
+    ];
 
-function Header() {
     return (
-        <Box bg={colors.topBarColor} py={4} w="full">
+        <>
-            <Flex alignItems={'center'} justifyContent={'center'} direction="column">
+            <Box bg={colors.topBarColor} py={4} w="full">
-                <Image src="/images/header_logo.webp" alt="Logo" width="150px" />
+                <Flex alignItems={'center'} justifyContent={'center'} direction="column" position="relative" w="full">
-            </Flex>
+                    <Image src="/images/header_logo.webp" alt="Logo" width="150px" />
-        </Box>
+                    {showMenu && (
+                        <Box
+                            position="absolute"
+                            right={4}
+                            top="50%"
+                            transform="translateY(-50%)"
+                            cursor="pointer"
+                            onClick={() => setIsDrawerOpen(true)}
+                            _hover={{ opacity: 0.8 }}
+                        >
+                            <GiHamburgerMenu 
+                                size={40} 
+                                color="#2E683D"
+                                style={{ display: 'block' }}
+                            />
+                        </Box>
+                    )}
+                </Flex>
+            </Box>
+
+            <DrawerRoot open={isDrawerOpen} onOpenChange={(e) => setIsDrawerOpen(e.open)} placement="end">
+                <DrawerBackdrop />
+                <DrawerContent>
+                    <DrawerHeader>
+                        <DrawerTitle>選單</DrawerTitle>
+                    </DrawerHeader>
+                    <DrawerCloseTrigger />
+                    <DrawerBody>
+                        <VStack align="stretch" gap={4} mt={4}>
+                            {menuItems.map((item, index) => (
+                                <Link
+                                    key={index}
+                                    href={item.href}
+                                    onClick={() => setIsDrawerOpen(false)}
+                                    textDecoration="none"
+                                    _hover={{ textDecoration: 'none' }}
+                                >
+                                    <Box
+                                        p={3}
+                                        borderRadius="md"
+                                        _hover={{ bg: 'gray.100' }}
+                                        cursor="pointer"
+                                    >
+                                        <Text fontSize="lg" fontWeight="medium">
+                                            {item.label}
+                                        </Text>
+                                    </Box>
+                                </Link>
+                            ))}
+                        </VStack>
+                    </DrawerBody>
+                </DrawerContent>
+            </DrawerRoot>
+        </>
     );
 }
 

src/components/layout.tsx

@@ -4,13 +4,17 @@ import {
   Container,
 } from '@chakra-ui/react'
 
-import Header from './header'
+
 import Footer from './footer'
 
-function Layout() {
+interface LayoutProps {
+  showMenu?: boolean;
+}
+
+function Layout({ showMenu = false }: LayoutProps) {
   return (
     <Container maxW="100vw" p={0} m={0} mt={0}>
-      <Header />
+      {/* <Header showMenu={showMenu} /> */}
       <Box position="relative">
         <Outlet />
       </Box>

src/pages/main.tsx

@@ -6,6 +6,7 @@ import Info from '@/components/new_ui/info'
 import Advantages from '@/components/new_ui/advantages'
 import OilInfo from '@/components/new_ui/oilInfo'
 import Truth from '@/components/new_ui/truth'
+import Header from '@/components/header'
 
 
 
@@ -13,6 +14,7 @@ import Truth from '@/components/new_ui/truth'
 function MainPage() {
   return (
     <>
+      <Header showMenu={true} />
       <Hero1 />
       <Hero2 />
       <Wraning />