header direct updated

src/components/header.tsx

@@ -1,4 +1,4 @@
-import { Box, Flex, Image, VStack, Text, Stack, Link } from '@chakra-ui/react';
+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';
@@ -8,6 +8,7 @@ import {
     DrawerContent,
     DrawerRoot,
 } from '@/components/ui/drawer';
+import { useRouter, useRouterState } from '@tanstack/react-router';
 
 interface HeaderProps {
     showMenu?: boolean;
@@ -19,6 +20,8 @@ function Header({ showMenu = false }: HeaderProps) {
     const [isVisible, setIsVisible] = useState(true);
     const headerRef = useRef<HTMLDivElement>(null);
     const lastScrollY = useRef(0);
+    const router = useRouter();
+    const { location } = useRouterState();
 
     useLayoutEffect(() => {
         const updateHeight = () => {
@@ -70,10 +73,32 @@ function Header({ showMenu = false }: HeaderProps) {
     }, []);
 
     const scrollToSection = (sectionId: string) => {
-        const element = document.getElementById(sectionId.replace('#', ''));
+        const targetId = sectionId.replace('#', '');
+        const isOnMainPage = location.pathname === '/';
+        const element = isOnMainPage ? document.getElementById(targetId) : null;
+
         if (element) {
             element.scrollIntoView({ behavior: 'smooth' });
+            return;
         }
+
+        router.navigate({
+            to: '/',
+            hash: targetId,
+            replace: location.pathname === '/',
+        });
+    };
+
+    const handleMenuClick = (itemId: string) => {
+        if (itemId === 'recipes') {
+            router.navigate({
+                to: '/recipe',
+                replace: location.pathname === '/recipe',
+            });
+        } else {
+            scrollToSection(itemId);
+        }
+
         setIsDrawerOpen(false);
     };
 
@@ -157,7 +182,7 @@ function Header({ showMenu = false }: HeaderProps) {
                                     alignItems="center"
 
                                     key={index}
-                                    onClick={() => scrollToSection(item.id)}
+                                    onClick={() => handleMenuClick(item.id)}
                                     p={3}
                                     _hover={{ bg: '#458B02' }}
                                     cursor="pointer"

src/pages/main.tsx

@@ -1,4 +1,6 @@
 
+import { useEffect } from 'react'
+import { useRouterState } from '@tanstack/react-router'
 import Hero1 from '../components/new_ui/hero1'
 import Hero2 from '../components/new_ui/hero2'
 import Wraning from '@/components/new_ui/wraning'
@@ -12,6 +14,38 @@ import Header from '@/components/header'
 
 
 function MainPage() {
+  const { location } = useRouterState()
+
+  useEffect(() => {
+    if (location.pathname !== '/' || !location.hash) {
+      return
+    }
+
+    const targetId = location.hash.replace('#', '')
+    let animationFrame = 0
+    let retryTimeout: number | undefined
+
+    const attemptScroll = () => {
+      const element = document.getElementById(targetId)
+      if (element) {
+        element.scrollIntoView({ behavior: 'smooth' })
+      } else {
+        retryTimeout = window.setTimeout(() => {
+          animationFrame = window.requestAnimationFrame(attemptScroll)
+        }, 50)
+      }
+    }
+
+    animationFrame = window.requestAnimationFrame(attemptScroll)
+
+    return () => {
+      window.cancelAnimationFrame(animationFrame)
+      if (retryTimeout) {
+        window.clearTimeout(retryTimeout)
+      }
+    }
+  }, [location.pathname, location.hash])
+
   return (
     <>
       <Header showMenu={true} />