From a3c7c9c3cc98a7e203977b642676f326df0e3c16 Mon Sep 17 00:00:00 2001
From: Sidharth Babu <95430324+sidhuiwnl@users.noreply.github.com>
Date: Tue, 3 Sep 2024 19:36:34 +0530
Subject: [PATCH] added scroll-top feature and navbar feature (#297)

---
 src/app/layout.tsx             |  2 ++
 src/components/ScrollToTop.tsx | 41 ++++++++++++++++++++++++++++++++++
 src/components/job-landing.tsx |  1 +
 src/layouts/header.tsx         | 28 ++++++++++++++++++++++-
 4 files changed, 71 insertions(+), 1 deletion(-)
 create mode 100644 src/components/ScrollToTop.tsx

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 6cc6e943..89e967b2 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -6,6 +6,7 @@ import type { Metadata } from 'next';
 import { Inter as FontSans } from 'next/font/google';
 import './globals.css';
 import TopLoader from '@/components/Toploader';
+import ScrollToTop from '@/components/ScrollToTop';
 
 const fontSans = FontSans({
   subsets: ['latin'],
@@ -36,6 +37,7 @@ export default async function RootLayout({
           <main className="grow grid">{children}</main>
           <Footer />
         </Providers>
+        <ScrollToTop />
       </body>
     </html>
   );
diff --git a/src/components/ScrollToTop.tsx b/src/components/ScrollToTop.tsx
new file mode 100644
index 00000000..7e27fb36
--- /dev/null
+++ b/src/components/ScrollToTop.tsx
@@ -0,0 +1,41 @@
+'use client';
+import { Button } from './ui/button';
+import { MoveUp } from 'lucide-react';
+import { useEffect, useState } from 'react';
+
+export default function ScrollToTop() {
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      if (window.scrollY > 200) {
+        setIsVisible(true);
+      } else {
+        setIsVisible(false);
+      }
+    };
+    window.addEventListener('scroll', handleScroll);
+
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+    };
+  }, []);
+
+  function toUp() {
+    window.scrollTo({
+      top: 0,
+      behavior: 'smooth',
+    });
+  }
+  return (
+    <Button
+      className={`fixed bottom-5 right-5 w-[50px] h-[50px] rounded-full bg-white text-black flex items-center justify-center shadow-lg hover:bg-gray-200 transition-opacity duration-300 ${
+        isVisible ? 'opacity-100' : 'opacity-0 pointer-events-none'
+      }`}
+      aria-label="Scroll to top"
+      onClick={toUp}
+    >
+      <MoveUp className="text-black" />
+    </Button>
+  );
+}
diff --git a/src/components/job-landing.tsx b/src/components/job-landing.tsx
index 1149c890..25d54684 100644
--- a/src/components/job-landing.tsx
+++ b/src/components/job-landing.tsx
@@ -21,6 +21,7 @@ import APP_PATHS from '@/config/path.config';
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
 import { redirect } from 'next/navigation';
+
 dayjs.extend(relativeTime);
 
 export const calculateTimeSincePosted = (postedAt: Date): string => {
diff --git a/src/layouts/header.tsx b/src/layouts/header.tsx
index 1686ab2c..50e75005 100644
--- a/src/layouts/header.tsx
+++ b/src/layouts/header.tsx
@@ -6,6 +6,7 @@ import Link from 'next/link';
 import { NavItem } from '@/components/navitem';
 import Image from 'next/image';
 import { Skeleton } from '@/components/ui/skeleton';
+import { useState, useEffect } from 'react';
 
 const CompanyLogo = () => {
   return (
@@ -26,9 +27,34 @@ const CompanyLogo = () => {
 
 const Header = () => {
   const session = useSession();
+  const [opacity, setOpacity] = useState(1);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      const scrollPosition = window.scrollY;
+      const windowHeight = window.innerHeight;
+
+      const fadeStart = 0;
+      const fadeEnd = windowHeight * 0.3;
+
+      if (scrollPosition <= fadeStart) {
+        setOpacity(1);
+      } else if (scrollPosition >= fadeEnd) {
+        setOpacity(0);
+      } else {
+        setOpacity(1 - (scrollPosition - fadeStart) / (fadeEnd - fadeStart));
+      }
+    };
+
+    window.addEventListener('scroll', handleScroll);
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, []);
 
   return (
-    <header className="sticky top-6 z-50 md:w-auto mx-auto w-full px-5">
+    <header
+      className="sticky top-6 z-50 md:w-auto mx-auto w-full px-6 transition-opacity duration-300"
+      style={{ opacity }}
+    >
       <div className="container flex h-14 max-w-screen-xl items-center md:border-2 rounded-full border-border/40 sm:bg-none sm:bg-background/60 ">
         <Link href="/" className="p-2.5 mr-4">
           <CompanyLogo />