feat: added scroll aware navigation

app/[locale]/student-activities/page.tsx

@@ -12,6 +12,8 @@ import { getTranslations } from '~/i18n/translations';
 import { cn } from '~/lib/utils';
 import { db } from '~/server/db';
 
+import ScrollAwareSection from './scroll-aware-section';
+
 export default async function StudentActivities({
   params: { locale },
 }: {
@@ -34,15 +36,52 @@ export default async function StudentActivities({
         src="assets/admin-block.png"
       />
 
-      <Heading
-        className="container"
-        glyphDirection="ltr"
-        heading="h3"
-        href="#clubs"
-        text={text.sections.clubs.title}
-      />
-
-      <section className="container mb-6 text-center">
+      <ScrollAwareSection
+        className="container mb-6 text-center"
+        location="clubs"
+      >
+        <Heading
+          glyphDirection="ltr"
+          heading="h3"
+          href="#clubs"
+          text={text.sections.clubs.title}
+        />
+        <Suspense fallback={<Loading />}>
+          <ClubsCarousel locale={locale} />
+        </Suspense>
+        <Button
+          asChild
+          className={cn(
+            'px-2 py-1 md:px-4 md:py-2',
+            'mt-4 sm:mt-5 md:mt-6 lg:mt-7 xl:mt-8',
+            'inline-flex items-center gap-1 md:gap-2',
+            'rounded-md border font-bold text-primary-700'
+          )}
+          variant="outline"
+        >
+          <Link href={`/${locale}/student-activities/clubs`}>
+            {text.sections.clubs.more}
+            <span className="rotate-90">
+              <FaArrowUp
+                className={cn(
+                  'mx-auto animate-bounce',
+                  'size-2 md:size-3 lg:size-4'
+                )}
+              />
+            </span>
+          </Link>
+        </Button>
+      </ScrollAwareSection>
+      <ScrollAwareSection
+        className="container mb-6 text-center"
+        location="council"
+      >
+        <Heading
+          glyphDirection="ltr"
+          heading="h3"
+          href="#council"
+          text={text.sections.clubs.title}
+        />
         <Suspense fallback={<Loading />}>
           <ClubsCarousel locale={locale} />
         </Suspense>
@@ -68,7 +107,7 @@ export default async function StudentActivities({
             </span>
           </Link>
         </Button>
-      </section>
+      </ScrollAwareSection>
     </>
   );
 }

app/[locale]/student-activities/scroll-aware-section.tsx

@@ -0,0 +1,30 @@
+'use client';
+
+import { type ReactNode } from 'react';
+import { useIntersectionObserver } from 'usehooks-ts';
+
+const ScrollAwareSection = ({
+  children,
+  className,
+  location,
+}: {
+  children: ReactNode;
+  className?: string;
+  location: string;
+}) => {
+  const { ref } = useIntersectionObserver({
+    rootMargin: '-10% 0px -90% 0px',
+    onChange: (isIntersecting) => {
+      if (!isIntersecting) return;
+      window.history.replaceState(null, '', `#${location}`);
+    },
+  });
+
+  return (
+    <section ref={ref} className={className} id={location}>
+      {children}
+    </section>
+  );
+};
+
+export default ScrollAwareSection;

components/image-header.tsx

@@ -1,9 +1,8 @@
-import Link from 'next/link';
-
-import { Button } from '~/components/ui';
 import { cn } from '~/lib/utils';
 import { getS3Url } from '~/server/s3';
 
+import ScrollingNav from './scrolling-nav';
+
 export default function ImageHeader({
   className,
   title,
@@ -55,17 +54,7 @@ export default function ImageHeader({
               'sm:mb-4 sm:mt-48 md:mb-[14px] md:mt-56 lg:mb-[30px] lg:mt-60 xl:mb-[38px] xl:mt-72 2xl:mt-[352px]' // DEPENDS-ON: header.tsx
             )}
           >
-            {headings.map(({ label, href }, index) => (
-              <li key={index}>
-                <Button
-                  asChild
-                  className="rounded-full px-4 py-2 text-shade-dark transition-colors duration-300"
-                  variant="ghost"
-                >
-                  <Link href={href}>{label}</Link>
-                </Button>
-              </li>
-            ))}
+            <ScrollingNav headings={headings} />
           </ol>
           <hr className="invisible hidden sm:block" />
         </>

components/scrolling-nav.tsx

@@ -0,0 +1,43 @@
+'use client';
+
+import Link from 'next/link';
+import { useEffect, useState } from 'react';
+import { useParams } from 'next/navigation';
+
+import { Button } from './ui';
+
+const ScrollingNav = ({
+  headings,
+}: {
+  headings: { label: string; href: string }[];
+}) => {
+  const [hash, setHash] = useState<string | null>(null);
+  const params = useParams();
+
+  useEffect(() => {
+    setHash(window.location.hash);
+  }, [params]);
+
+  return headings.map(({ label, href }, index) => (
+    <li key={index}>
+      <Button
+        asChild
+        className="rounded-full px-4 py-2 text-shade-dark transition-colors duration-300"
+        variant="ghost"
+        active={hash === 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>
+    </li>
+  ));
+};
+
+export default ScrollingNav;