header height adjust

src/components/header.tsx

@@ -1,15 +1,12 @@
 import { Box, Flex, Image, VStack, Text, Link } from '@chakra-ui/react';
 import { GiHamburgerMenu } from "react-icons/gi";
 import { colors } from '../colors';
-import { useState } from 'react';
+import { useState, useRef, useLayoutEffect } from 'react';
 import {
-    DrawerBackdrop,
     DrawerBody,
     DrawerCloseTrigger,
     DrawerContent,
-    DrawerHeader,
     DrawerRoot,
-    DrawerTitle,
 } from '@/components/ui/drawer';
 
 interface HeaderProps {
@@ -18,6 +15,14 @@ interface HeaderProps {
 
 function Header({ showMenu = false }: HeaderProps) {
     const [isDrawerOpen, setIsDrawerOpen] = useState(false);
+    const [headerHeight, setHeaderHeight] = useState(0);
+    const headerRef = useRef<HTMLDivElement>(null);
+
+    useLayoutEffect(() => {
+        if (headerRef.current) {
+            setHeaderHeight(headerRef.current.offsetHeight);
+        }
+    }, []);
 
     const menuItems = [
         { label: '40+常見健康問題', href: '#health-issues' },
@@ -28,7 +33,15 @@ function Header({ showMenu = false }: HeaderProps) {
 
     return (
         <>
-            <Box bg={colors.topBarColor} py={4} w="full">
+            <Box 
+                ref={headerRef} 
+                bg={colors.topBarColor} 
+                py={4} 
+                w="full"
+                position="sticky"
+                top={0}
+                zIndex={1000}
+            >
                 <Flex alignItems={'center'} justifyContent={'center'} direction="column" position="relative" w="full">
                     <Image src="/images/header_logo.webp" alt="Logo" width="150px" />
                     {showMenu && (
@@ -52,13 +65,28 @@ function Header({ showMenu = false }: HeaderProps) {
             </Box>
 
             <DrawerRoot open={isDrawerOpen} onOpenChange={(e) => setIsDrawerOpen(e.open)} placement="end">
-                <DrawerBackdrop />
                 <DrawerContent
-                bgColor={'#92C100'}
+                    bgColor={'#92C100'}
+                    width={{ base: "100%", sm: "100%", md: "400px" }}
+                    maxWidth={{ base: "100%", sm: "100%", md: "400px" }}
+                    margin={0}
+                    padding={0}
+                    positionerProps={{
+                        style: {
+                            top: `${headerHeight}px`,
+                            right: 0,
+                            bottom: 0,
+                            height: `calc(100vh - ${headerHeight}px)`
+                        },
+                        zIndex: 1100,
+                    }}
                 >
                   
                     <DrawerCloseTrigger />
-                    <DrawerBody>
+                    <DrawerBody
+                        padding={0}
+                        margin={0}
+                    >
                         <VStack align="stretch" gap={4} mt={4}>
                             {menuItems.map((item, index) => (
                                 <Link

src/components/ui/drawer.tsx

@@ -6,16 +6,24 @@ interface DrawerContentProps extends ChakraDrawer.ContentProps {
   portalled?: boolean
   portalRef?: React.RefObject<HTMLElement>
   offset?: ChakraDrawer.ContentProps["padding"]
+  positionerProps?: React.ComponentProps<typeof ChakraDrawer.Positioner>
 }
 
 export const DrawerContent = React.forwardRef<
   HTMLDivElement,
   DrawerContentProps
 >(function DrawerContent(props, ref) {
-  const { children, portalled = true, portalRef, offset, ...rest } = props
+  const {
+    children,
+    portalled = true,
+    portalRef,
+    offset,
+    positionerProps,
+    ...rest
+  } = props
   return (
     <Portal disabled={!portalled} container={portalRef}>
-      <ChakraDrawer.Positioner padding={offset}>
+      <ChakraDrawer.Positioner padding={offset} {...positionerProps}>
         <ChakraDrawer.Content ref={ref} {...rest} asChild={false}>
           {children}
         </ChakraDrawer.Content>