diff --git a/src/components/shared/home/home-theme.tsx b/src/components/shared/home/home-theme.tsx
index 19d9ded..d3800b7 100644
--- a/src/components/shared/home/home-theme.tsx
+++ b/src/components/shared/home/home-theme.tsx
@@ -15,7 +15,7 @@ export const HomeTheme: FC = () => {
if (isPending) return ;
return (
-
+
{homeTheme[useTranslate(lang)].title}
diff --git a/src/components/shared/menu.tsx b/src/components/shared/menu.tsx
index 359aead..63d0732 100644
--- a/src/components/shared/menu.tsx
+++ b/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> = ({
}) => {
const [isOpen, setIsOpen] = useState(false);
const setSheet = useUiStore((state) => state.setSheet);
+ const lenis = useLenis();
+ const location = useLocation();
return (
setIsOpen(!isOpen)}>
@@ -53,6 +56,15 @@ export const Menu: FC> = ({
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}
diff --git a/src/hooks/use-scroll-top.ts b/src/hooks/use-scroll-top.ts
index 259c08a..f155176 100644
--- a/src/hooks/use-scroll-top.ts
+++ b/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]);
};
diff --git a/src/locales/en/nav.json b/src/locales/en/nav.json
index c3d3c45..044284c 100644
--- a/src/locales/en/nav.json
+++ b/src/locales/en/nav.json
@@ -102,7 +102,7 @@
},
{
"text": "Themtic areas of the exhibition",
- "link": ""
+ "link": "/#themes"
}
]
}
diff --git a/src/locales/ru/nav.json b/src/locales/ru/nav.json
index 1ac9b4e..f34b8be 100644
--- a/src/locales/ru/nav.json
+++ b/src/locales/ru/nav.json
@@ -99,7 +99,7 @@
},
{
"text": "Тематические разделы",
- "link": ""
+ "link": "/#themes"
}
]
}
diff --git a/src/locales/tm/nav.json b/src/locales/tm/nav.json
index 79228a9..cb6a338 100644
--- a/src/locales/tm/nav.json
+++ b/src/locales/tm/nav.json
@@ -102,7 +102,7 @@
},
{
"text": "Tematiki bölümler",
- "link": ""
+ "link": "/#themes"
}
]
}