ramadhan.devPada sesi kali ini kita akan membuat sticky navbar dengan tailwind css dan react js.
Proses instalasi react dan tailwind css bisa di lihat di artikel sebelumnya
Mari kita langsung buat code untuk navbarnya
Create HTML untuk tampilan Navbarnya
<React.Fragment>
<nav className={`fixed inset-x-0 top-0 z-50 flex items-center justify-center h-[60px] py-3 [&.is-sticky]:bg-white border-b border-slate-200 [&.is-sticky]:shadow-lg [&.is-sticky]:shadow-slate-200/25 navba ${navClass}`} id="navbar">
<div className="container 2xl:max-w-[90rem] px-4 mx-auto flex items-center self-center w-full">
<div className="mx-auto">
<ul id="navbar7" className={`absolute inset-x-0 z-20 items-center py-3 bg-white shadow-lg dark:bg-zink-600 dark:md:bg-transparent md:z-0 navbar-menu rounded-b-md md:shadow-none md:flex top-full ltr:ml-auto rtl:mr-auto md:relative md:bg-transparent md:rounded-none md:top-auto md:py-0`}>
<li>
<a href="#home"
className={`block md:inline-block px-4 md:px-3 py-2.5 md:py-0.5 text-15 font-medium text-slate-800 transition-all duration-300 ease-linear hover:text-red-500 [&.active]:text-red-500 dark:text-zink-100 dark:hover:text-red-500 dark:[&.active]:text-red-500 ${activeLink === "/Home" ? "active" : ""}`}
onClick={() => handleLinkClick("/Home")}
>
Home</a>
</li>
<li>
<a href="#features"
className={`block md:inline-block px-4 md:px-3 py-2.5 md:py-0.5 text-15 font-medium text-slate-800 transition-all duration-300 ease-linear hover:text-red-500 [&.active]:text-red-500 dark:text-zink-100 dark:hover:text-red-500 dark:[&.active]:text-red-500 ${activeLink === "/Features" ? "active" : ""}`}
onClick={() => handleLinkClick("/Features")}
>
Layanan Kami</a>
</li>
</ul>
</div>
</div>
</nav>
<section className="relative mt-[60px] h-[800px] bg-yellow-600" id="home">
<div className="flex items-center justify-center h-full">
HOME
</div>
</section>
<section className="relative h-[800px] bg-green-600" id="features">
<div className="flex items-center justify-center h-full">
FEATURES
</div>
</section>
</React.Fragment>
Fungsi Scroll
fungsi ini berfungsi untuk mengubah status navbar menjadi sticky, dan tambahkan juga animasi smooth agar proses perpindahan halamannya menjadi bagus
const [navClass, setNavClass] = React.useState<string>('');
const scrollNavigation = () => {
var scrollUp = document.documentElement.scrollTop;
if (scrollUp >= 50) {
setNavClass('is-sticky');
} else {
setNavClass('');
}
};
React.useEffect(() => {
window.addEventListener('scroll', scrollNavigation, true);
document.documentElement.classList.add("overflow-x-hidden", "scroll-smooth", "group");
return () => {
window.removeEventListener('scroll', scrollNavigation, true);
document.documentElement.classList.remove("overflow-x-hidden", "scroll-smooth", "group");
};
}, []);
Fungsi Set Active menu
fungsi ini berfungsi untuk merubah class aktif yang ada pada menu, dan mengarahkan halaman sesuai deangan menu yang di akses
const [activeLink, setActiveLink] = React.useState<string>("/Home");
const handleLinkClick = (target: string) => {
setActiveLink(target);
};
Script lengkapnya seperti berikut
import React from "react"
function App() {
const [navClass, setNavClass] = React.useState<string>('');
const scrollNavigation = () => {
var scrollUp = document.documentElement.scrollTop;
if (scrollUp >= 50) {
setNavClass('is-sticky');
} else {
setNavClass('');
}
};
React.useEffect(() => {
window.addEventListener('scroll', scrollNavigation, true);
document.documentElement.classList.add("overflow-x-hidden", "scroll-smooth", "group");
return () => {
window.removeEventListener('scroll', scrollNavigation, true);
document.documentElement.classList.remove("overflow-x-hidden", "scroll-smooth", "group");
};
}, []);
const [activeLink, setActiveLink] = React.useState<string>("/Home");
const handleLinkClick = (target: string) => {
setActiveLink(target);
};
return (
<React.Fragment>
<nav className={`fixed inset-x-0 top-0 z-50 flex items-center justify-center h-[60px] py-3 [&.is-sticky]:bg-white border-b border-slate-200 [&.is-sticky]:shadow-lg [&.is-sticky]:shadow-slate-200/25 navba ${navClass}`} id="navbar">
<div className="container 2xl:max-w-[90rem] px-4 mx-auto flex items-center self-center w-full">
<div className="mx-auto">
<ul id="navbar7" className={`absolute inset-x-0 z-20 items-center py-3 bg-white shadow-lg dark:bg-zink-600 dark:md:bg-transparent md:z-0 navbar-menu rounded-b-md md:shadow-none md:flex top-full ltr:ml-auto rtl:mr-auto md:relative md:bg-transparent md:rounded-none md:top-auto md:py-0`}>
<li>
<a href="#home"
className={`block md:inline-block px-4 md:px-3 py-2.5 md:py-0.5 text-15 font-medium text-slate-800 transition-all duration-300 ease-linear hover:text-red-500 [&.active]:text-red-500 dark:text-zink-100 dark:hover:text-red-500 dark:[&.active]:text-red-500 ${activeLink === "/Home" ? "active" : ""}`}
onClick={() => handleLinkClick("/Home")}
>
Home</a>
</li>
<li>
<a href="#features"
className={`block md:inline-block px-4 md:px-3 py-2.5 md:py-0.5 text-15 font-medium text-slate-800 transition-all duration-300 ease-linear hover:text-red-500 [&.active]:text-red-500 dark:text-zink-100 dark:hover:text-red-500 dark:[&.active]:text-red-500 ${activeLink === "/Features" ? "active" : ""}`}
onClick={() => handleLinkClick("/Features")}
>
Layanan Kami</a>
</li>
</ul>
</div>
</div>
</nav>
<section className="relative mt-[60px] h-[800px] bg-yellow-600" id="home">
<div className="flex items-center justify-center h-full">
HOME
</div>
</section>
<section className="relative h-[800px] bg-green-600" id="features">
<div className="flex items-center justify-center h-full">
FEATURES
</div>
</section>
</React.Fragment>
)
}
export default App
