fix: add link to the themes nav

src/components/shared/home/home-theme.tsx

@@ -15,7 +15,7 @@ export const HomeTheme: FC = () => {
   if (isPending) return <Loader />;
 
   return (
-    <section className="">
+    <section id="themes" className="">
       <Container>
         <h2 className="h2 mb-10 text-center">
           {homeTheme[useTranslate(lang)].title}

src/components/shared/menu.tsx

@@ -1,11 +1,12 @@
 import { FC, PropsWithChildren, useState } from "react";
 import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
 import { Chevron, HoverMenu } from "./";
-import { Link } from "react-router-dom";
+import { Link, useLocation } from "react-router-dom";
 import { Modal } from "./modal";
 import { DropDownContent } from "@/locales/types/nav.type";
 import { cn } from "@/lib/utils";
 import { useUiStore } from "@/store/ui";
+import { useLenis } from "lenis/react";
 
 interface Props {
   className?: string;
@@ -25,6 +26,8 @@ export const Menu: FC<PropsWithChildren<Props>> = ({
 }) => {
   const [isOpen, setIsOpen] = useState(false);
   const setSheet = useUiStore((state) => state.setSheet);
+  const lenis = useLenis();
+  const location = useLocation();
 
   return (
     <Popover open={isOpen} onOpenChange={() => setIsOpen(!isOpen)}>
@@ -53,6 +56,15 @@ export const Menu: FC<PropsWithChildren<Props>> = ({
                 onClick={() => {
                   setIsOpen(false);
                   setSheet(false);
+
+                  const hash = item.link?.split("#")[1];
+                  const path = item.link?.split("#")[0] || "/";
+                  if (hash && location.pathname === path) {
+                    const el = document.getElementById(hash);
+                    if (el && lenis) {
+                      lenis.scrollTo(el, { offset: -140, duration: 0.8 });
+                    }
+                  }
                 }}
                 className="h-14 px-3 flex gap-3 relative justify-between cursor-pointer items-center hover:bg-slate-300/50 transition-all"
                 target={item.blank ? "_blank" : undefined}

src/hooks/use-scroll-top.ts

@@ -1,14 +1,29 @@
 import { useLenis } from "lenis/react";
 import { useEffect } from "react";
+import { useLocation } from "react-router-dom";
 
 export const useScrollTop = (arg?: string | number) => {
   const lenis = useLenis();
+  const { hash } = useLocation();
 
   useEffect(() => {
     if (!lenis) return;
+
+    if (hash) {
+      const el = document.querySelector(hash);
+      if (el) {
+        lenis.scrollTo(el as HTMLElement, {
+          lerp: 0.3,
+          duration: 0.8,
+          offset: -140,
+        });
+        return;
+      }
+    }
+
     lenis.scrollTo(0, {
       lerp: 0.3,
       duration: 0.3,
     });
-  }, [lenis, arg]);
+  }, [lenis, arg, hash]);
 };

src/locales/en/nav.json

@@ -102,7 +102,7 @@
         },
         {
           "text": "Themtic areas of the exhibition",
-          "link": ""
+          "link": "/#themes"
         }
       ]
     }

src/locales/ru/nav.json

@@ -99,7 +99,7 @@
         },
         {
           "text": "Тематические разделы",
-          "link": ""
+          "link": "/#themes"
         }
       ]
     }

src/locales/tm/nav.json

@@ -102,7 +102,7 @@
         },
         {
           "text": "Tematiki bölümler",
-          "link": ""
+          "link": "/#themes"
         }
       ]
     }