fix: impored scroll margins

nitkkr-dev · Apr 28, 2024 · 13cf9f7 · 13cf9f7
1 parent 09bc981
commit 13cf9f7
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 2 deletions.
diff --git a/app/[locale]/student-activities/scroll-aware-section.tsx b/app/[locale]/student-activities/scroll-aware-section.tsx
@@ -12,7 +12,8 @@ const ScrollAwareSection = ({
   location: string;
 }) => {
   const { ref } = useIntersectionObserver({
-    threshold: 0.5,
+    rootMargin: '0px 0px -90% 0px',
+    threshold: 0.1,
     onChange: (isIntersecting) => {
       if (!isIntersecting) return;
       window.history.replaceState(null, '', `#${location}`);

diff --git a/components/scrolling-nav.tsx b/components/scrolling-nav.tsx
@@ -26,7 +26,13 @@ const ScrollingNav = ({
         variant="ghost"
         active={hash === href}
       >
-        <Link href={href} onClick={() => setHash(href)}>
+        <Link
+          href={href}
+          onClick={(event) => {
+            (event.target as HTMLButtonElement).blur(); // to be removed, focus styles overrides both active and normal styles on the button causing visual bug
+            setHash(href);
+          }}
+        >
           {label}
         </Link>
       </Button>