banksampah
/
bank-sampah
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: navbar

main
Rohmad Eko Wahyudi 2025-11-12 06:15:14 +07:00
parent 8ffe8df6f3
commit 07021a53e3
No known key found for this signature in database
GPG Key ID: 4CCEDA68CB778BAF
2 changed files with 40 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
Views/Shared/_Layout.cshtml
View File

@ -41,7 +41,7 @@
<!-- Landing page dengan navbar dan footer --> <!-- Landing page dengan navbar dan footer -->
<partial name="_NavbarLanding" /> <partial name="_NavbarLanding" />
<main class="pt-16"> <main>
@RenderBody() @RenderBody()
</main> </main>

57
Views/Shared/_NavbarLanding.cshtml
View File

@ -1,23 +1,44 @@
<nav class="navbar fixed top-0 left-0 right-0 z-50 bg-white shadow-sm"> <nav id="navbar" class="w-full h-24 px-4 lg:px-28 fixed left-0 top-0 z-50 flex flex-col justify-center items-center transition-all duration-300">
<div class="container mx-auto px-4 lg:px-28"> <div class="w-full max-w-[1440px] flex justify-center items-center gap-8">
<div class="flex-1"> <div class="flex-1 flex justify-start items-center gap-2">
<a href="/" class="flex items-center gap-3"> <img class="w-11 h-10" src="/images/logo.png" alt="Logo" />
<img src="/images/logo.png" alt="Logo" class="h-12 w-12" /> </div>
<span class="text-xl font-bold font-jakarta text-gray-900">e-Bank Sampah Jakarta</span> <div class="hidden lg:flex justify-start items-center gap-8">
<a href="/" class="rounded-[99px] flex justify-center items-center gap-2 hover:bg-white/10 px-4 py-2 transition-colors">
<div class="text-white text-base font-semibold font-jakarta leading-6">Beranda</div>
</a>
<a href="#about" class="rounded-[99px] flex justify-center items-center gap-2 hover:bg-white/10 px-4 py-2 transition-colors">
<div class="text-gray-300 text-base font-semibold font-jakarta leading-6">Tentang</div>
</a>
<a href="#publications" class="rounded-[99px] flex justify-center items-center gap-2 hover:bg-white/10 px-4 py-2 transition-colors">
<div class="text-gray-300 text-base font-semibold font-jakarta leading-6">Publikasi</div>
</a>
<a href="#regulations" class="rounded-[99px] flex justify-center items-center gap-2 hover:bg-white/10 px-4 py-2 transition-colors">
<div class="text-gray-300 text-base font-semibold font-jakarta leading-6">Regulasi</div>
</a>
<a href="#location" class="rounded-[99px] flex justify-center items-center gap-2 hover:bg-white/10 px-4 py-2 transition-colors">
<div class="text-gray-300 text-base font-semibold font-jakarta leading-6">Lokasi</div>
</a>
<a href="#helpdesk" class="rounded-[99px] flex justify-center items-center gap-2 hover:bg-white/10 px-4 py-2 transition-colors">
<div class="text-gray-300 text-base font-semibold font-jakarta leading-6">Helpdesk</div>
</a> </a>
</div> </div>
<div class="flex-none"> <div class="flex-1 flex justify-end items-center gap-4">
<ul class="menu menu-horizontal px-1 gap-2"> <a asp-controller="Dashboard" class="px-8 py-2.5 bg-green-800 hover:bg-green-700 rounded-[99px] flex justify-center items-center gap-2 transition-colors">
<li><a href="/" class="font-jakarta">Beranda</a></li> <div class="text-white text-base font-semibold font-jakarta leading-6">Login</div>
<li><a href="#about" class="font-jakarta">Tentang</a></li> </a>
<li><a href="#regulations" class="font-jakarta">Regulasi</a></li>
<li><a href="#contact" class="font-jakarta">Kontak</a></li>
<li>
<a asp-controller="Dashboard" class="btn btn-sm bg-green-800 hover:bg-green-700 text-white rounded-full font-jakarta">
Login
</a>
</li>
</ul>
</div> </div>
</div> </div>
</nav> </nav>
<script>
// Navbar scroll effect
window.addEventListener('scroll', function() {
const navbar = document.getElementById('navbar');
if (window.scrollY > 50) {
navbar.classList.add('bg-black/80', 'backdrop-blur-sm', 'shadow-lg');
} else {
navbar.classList.remove('bg-black/80', 'backdrop-blur-sm', 'shadow-lg');
}
});
</script>