From c3bb3627d792603f99f348a19478174c34f66e02 Mon Sep 17 00:00:00 2001
From: refansa <m.refansa.am@gmail.com>
Date: Sun, 28 Jul 2024 23:53:44 +0700
Subject: [PATCH] feat: added smooth scroll for hash link

---
 package.json                                    |  2 +-
 .../blocks/header/header-navigation.tsx         | 17 ++++++++++++++++-
 src/styles/globals.css                          |  3 +++
 3 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 4d5ba16..81b740b 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "refansa.my.id",
-  "version": "0.0.1b",
+  "version": "0.0.1c",
   "private": true,
   "homepage": "https://refansa.my.id",
   "author": {
diff --git a/src/components/blocks/header/header-navigation.tsx b/src/components/blocks/header/header-navigation.tsx
index 3165d82..202138f 100644
--- a/src/components/blocks/header/header-navigation.tsx
+++ b/src/components/blocks/header/header-navigation.tsx
@@ -1,5 +1,8 @@
+'use client'
+
 import Link from 'next/link'
 import dynamic from 'next/dynamic'
+import { usePathname } from 'next/navigation'
 
 import { MenuIcon, XIcon } from 'lucide-react'
 
@@ -30,10 +33,22 @@ const ThemeSwitch = dynamic(
 )
 
 export default function HeaderNavigation() {
+  const pathname = usePathname()
+
+  const smoothHeaderScroll = (e: any) => {
+    if (pathname === '/') {
+      e.preventDefault()
+      window.scrollTo({
+        top: 0,
+        behavior: 'smooth',
+      })
+    }
+  }
+
   return (
     <nav className="flex h-16 p-2 items-center">
       <div className="flex-1">
-        <Link href={'/'} className="font-bold text-xl">
+        <Link href={'/'} className="font-bold text-xl" onClick={smoothHeaderScroll}>
           Refansa
         </Link>
       </div>
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 2a1b2c7..89dea28 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -63,6 +63,9 @@
   * {
     @apply border-border;
   }
+  html {
+    @apply scroll-smooth;
+  }
   body {
     @apply bg-background text-foreground;
   }