header updated

src/components/header.tsx

@@ -1,10 +1,10 @@
 import { Box, Flex, Image, VStack, Text, Link } from '@chakra-ui/react';
 import { GiHamburgerMenu } from "react-icons/gi";
+import { IoCloseSharp } from "react-icons/io5";
 import { colors } from '../colors';
 import { useState, useRef, useLayoutEffect } from 'react';
 import {
     DrawerBody,
-    DrawerCloseTrigger,
     DrawerContent,
     DrawerRoot,
 } from '@/components/ui/drawer';
@@ -19,9 +19,32 @@ function Header({ showMenu = false }: HeaderProps) {
     const headerRef = useRef<HTMLDivElement>(null);
 
     useLayoutEffect(() => {
+        const updateHeight = () => {
             if (headerRef.current) {
-            setHeaderHeight(headerRef.current.offsetHeight);
+                setHeaderHeight(headerRef.current.getBoundingClientRect().height);
             }
+        };
+
+        updateHeight();
+
+        if (typeof window !== 'undefined') {
+            window.addEventListener('resize', updateHeight);
+        }
+
+        const observer = typeof ResizeObserver !== 'undefined' && headerRef.current
+            ? new ResizeObserver(updateHeight)
+            : undefined;
+
+        if (observer && headerRef.current) {
+            observer.observe(headerRef.current);
+        }
+
+        return () => {
+            if (typeof window !== 'undefined') {
+                window.removeEventListener('resize', updateHeight);
+            }
+            observer?.disconnect();
+        };
     }, []);
 
     const menuItems = [
@@ -51,14 +74,22 @@ function Header({ showMenu = false }: HeaderProps) {
                             top="50%"
                             transform="translateY(-50%)"
                             cursor="pointer"
-                            onClick={() => setIsDrawerOpen(true)}
+                            onClick={() => setIsDrawerOpen((prev) => !prev)}
                             _hover={{ opacity: 0.8 }}
                         >
+                            {isDrawerOpen ? (
+                                <IoCloseSharp
+                                    size={40}
+                                    color="#2E683D"
+                                    style={{ display: 'block' }}
+                                />
+                            ) : (
                                 <GiHamburgerMenu 
                                     size={40} 
                                     color="#2E683D"
                                     style={{ display: 'block' }}
                                 />
+                            )}
                         </Box>
                     )}
                 </Flex>
@@ -73,16 +104,14 @@ function Header({ showMenu = false }: HeaderProps) {
                     padding={0}
                     positionerProps={{
                         style: {
-                            top: `${headerHeight}px`,
+                            top: headerHeight ? `${headerHeight}px` : undefined,
                             right: 0,
                             bottom: 0,
-                            height: `calc(100vh - ${headerHeight}px)`
+                            height: headerHeight ? `calc(100vh - ${headerHeight}px)` : '100vh',
                         },
-                        zIndex: 1100,
+                        zIndex: 900,
                     }}
                 >
-                  
-                    <DrawerCloseTrigger />
                     <DrawerBody
                         padding={0}
                         margin={0}