feat: added smooth scroll for hash link

This commit is contained in:
Refansa 2024-07-28 23:53:44 +07:00
parent 5600c9512b
commit c3bb3627d7
3 changed files with 20 additions and 2 deletions

View File

@ -1,6 +1,6 @@
{ {
"name": "refansa.my.id", "name": "refansa.my.id",
"version": "0.0.1b", "version": "0.0.1c",
"private": true, "private": true,
"homepage": "https://refansa.my.id", "homepage": "https://refansa.my.id",
"author": { "author": {

View File

@ -1,5 +1,8 @@
'use client'
import Link from 'next/link' import Link from 'next/link'
import dynamic from 'next/dynamic' import dynamic from 'next/dynamic'
import { usePathname } from 'next/navigation'
import { MenuIcon, XIcon } from 'lucide-react' import { MenuIcon, XIcon } from 'lucide-react'
@ -30,10 +33,22 @@ const ThemeSwitch = dynamic(
) )
export default function HeaderNavigation() { export default function HeaderNavigation() {
const pathname = usePathname()
const smoothHeaderScroll = (e: any) => {
if (pathname === '/') {
e.preventDefault()
window.scrollTo({
top: 0,
behavior: 'smooth',
})
}
}
return ( return (
<nav className="flex h-16 p-2 items-center"> <nav className="flex h-16 p-2 items-center">
<div className="flex-1"> <div className="flex-1">
<Link href={'/'} className="font-bold text-xl"> <Link href={'/'} className="font-bold text-xl" onClick={smoothHeaderScroll}>
Refansa Refansa
</Link> </Link>
</div> </div>

View File

@ -63,6 +63,9 @@
* { * {
@apply border-border; @apply border-border;
} }
html {
@apply scroll-smooth;
}
body { body {
@apply bg-background text-foreground; @apply bg-background text-foreground;
} }