216 lines
13 KiB
Plaintext
216 lines
13 KiB
Plaintext
<nav class="absolute top-0 left-0 right-0 z-50">
|
|
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 border rounded-b-3xl border-amber-50 border-t-0 pb-2 backdrop-blur-md bg-white/10">
|
|
<div class="flex justify-between items-center h-16">
|
|
<div class="flex items-center">
|
|
<img class="w-12 h-12 sm:w-16 sm:h-16" src="@Url.Content("~/website/logo.svg")" alt="Logo">
|
|
</div>
|
|
|
|
<div class="hidden lg:flex items-center space-x-8">
|
|
<a href="/" class="text-white hover:text-amber-300 font-medium transition-all duration-300 hover:scale-105 relative group">
|
|
BERANDA
|
|
<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-amber-300 transition-all duration-300 group-hover:w-full"></span>
|
|
</a>
|
|
<a href="@Url.Action("Usaha", "Website")" class="text-white hover:text-amber-300 font-medium transition-all duration-300 hover:scale-105 relative group">
|
|
USAHA/KEGIATAN
|
|
<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-amber-300 transition-all duration-300 group-hover:w-full"></span>
|
|
</a>
|
|
<div class="relative group" id="dropdown-jasa">
|
|
<button type="button" class="text-white hover:text-amber-300 font-medium transition-all duration-300 hover:scale-105 relative group flex items-center gap-2" id="dropdown-jasa-button">
|
|
PENYEDIA JASA
|
|
<svg class="w-4 h-4 transition-transform duration-300 group-hover:rotate-180" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /></svg>
|
|
<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-amber-300 transition-all duration-300 group-hover:w-full"></span>
|
|
</button>
|
|
<div class="absolute left-0 mt-2 min-w-[240px] bg-white/95 rounded-2xl shadow-xl border border-amber-100 opacity-0 pointer-events-none transition-all duration-300 z-[100] group-hover:opacity-100 group-hover:pointer-events-auto flex flex-col divide-y divide-amber-100 transform origin-top scale-95 group-hover:scale-100" id="dropdown-jasa-menu">
|
|
<a href="@Url.Action("PengangkutanSampah", "Website")" class="flex items-center px-5 py-3 text-gray-900 font-semibold hover:bg-amber-50 hover:text-amber-600 transition-all duration-200 rounded-t-2xl">
|
|
<span class="mr-2"><svg class="w-5 h-5 text-amber-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h8" /></svg></span>
|
|
PENGANGKUTAN SAMPAH
|
|
</a>
|
|
<a href="@Url.Action("PengolahanSampah", "Website")" class="flex items-center px-5 py-3 text-gray-900 font-semibold hover:bg-teal-50 hover:text-teal-600 transition-all duration-200 rounded-b-2xl">
|
|
<span class="mr-2"><svg class="w-5 h-5 text-teal-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v8" /></svg></span>
|
|
PENGOLAHAN SAMPAH
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<a href="@Url.Action("Kontak", "Website")" class="text-white hover:text-amber-300 font-medium transition-all duration-300 hover:scale-105 relative group">
|
|
KONTAK
|
|
<span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-amber-300 transition-all duration-300 group-hover:w-full"></span>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="hidden lg:flex items-center space-x-4">
|
|
<a href="#" class="text-white hover:text-amber-300 font-medium transition-all duration-300 hover:scale-105 px-4 py-2 rounded-full border border-white/20 hover:border-amber-300/50">
|
|
MASUK
|
|
</a>
|
|
<a href="@Url.Action("Signup", "Website")" class="bg-gradient-to-r from-[#20D3D3] to-[#20D3D3] text-white px-6 py-2 rounded-full hover:from-teal-500 hover:to-blue-600 transition-all duration-300 font-medium transform hover:scale-105 shadow-lg hover:shadow-xl">
|
|
DAFTAR
|
|
</a>
|
|
</div>
|
|
|
|
<div class="lg:hidden">
|
|
<button id="mobile-menu-button" class="text-white hover:text-amber-300 transition-colors duration-300 p-2">
|
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="mobile-menu" class="lg:hidden hidden">
|
|
<div class="px-2 pt-2 pb-3 space-y-1 bg-white/20 backdrop-blur-md rounded-2xl mt-2 border border-white/10">
|
|
<a href="/" class="block px-3 py-2 text-white hover:text-amber-300 hover:bg-white/10 rounded-lg font-medium transition-all duration-300">
|
|
BERANDA
|
|
</a>
|
|
<a href="@Url.Action("Usaha", "Website")" class="block px-3 py-2 text-white hover:text-amber-300 hover:bg-white/10 rounded-lg font-medium transition-all duration-300">
|
|
USAHA/KEGIATAN
|
|
</a>
|
|
<div class="mobile-dropdown">
|
|
<button class="flex justify-between items-center w-full px-3 py-2 text-white hover:text-amber-300 hover:bg-white/10 rounded-lg font-medium transition-all duration-300" onclick="toggleMobileSubmenu(this)">
|
|
<span>PENYEDIA JASA</span>
|
|
<svg class="w-4 h-4 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
|
|
</svg>
|
|
</button>
|
|
<div class="hidden pl-4 mt-1 space-y-1 bg-white/10 rounded-lg">
|
|
<a href="@Url.Action("PengangkutanSampah", "Website")" class="flex items-center px-3 py-2 text-white hover:text-amber-300 hover:bg-white/10 rounded-lg transition-all duration-300">
|
|
<span class="mr-2 text-amber-400">•</span>
|
|
Pengangkutan Sampah
|
|
</a>
|
|
<a href="@Url.Action("PengolahanSampah", "Website")" class="flex items-center px-3 py-2 text-white hover:text-amber-300 hover:bg-white/10 rounded-lg transition-all duration-300">
|
|
<span class="mr-2 text-teal-400">•</span>
|
|
Pengolahan Sampah
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<a href="@Url.Action("Kontak", "Website")" class="block px-3 py-2 text-white hover:text-amber-300 hover:bg-white/10 rounded-lg font-medium transition-all duration-300">
|
|
KONTAK
|
|
</a>
|
|
<div class="flex flex-col space-y-2 pt-2 border-t border-white/20">
|
|
<a href="#" class="block px-3 py-2 text-white hover:text-amber-300 hover:bg-white/10 rounded-lg font-medium transition-all duration-300 text-center border border-white/20">
|
|
MASUK
|
|
</a>
|
|
<a href="@Url.Action("Daftar", "Website")" class="block px-3 py-2 bg-gradient-to-r from-teal-400 to-blue-500 text-white rounded-lg font-medium text-center hover:from-teal-500 hover:to-blue-600 transition-all duration-300 shadow-lg">
|
|
DAFTAR
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<register-block dynamic-section="scripts" key="jsNavbar">
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const mobileMenuButton = document.getElementById('mobile-menu-button');
|
|
const mobileMenu = document.getElementById('mobile-menu');
|
|
|
|
mobileMenuButton.addEventListener('click', function() {
|
|
mobileMenu.classList.toggle('hidden');
|
|
|
|
const svg = mobileMenuButton.querySelector('svg');
|
|
if (mobileMenu.classList.contains('hidden')) {
|
|
svg.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>';
|
|
} else {
|
|
svg.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>';
|
|
}
|
|
});
|
|
|
|
document.addEventListener('click', function(event) {
|
|
if (!mobileMenuButton.contains(event.target) && !mobileMenu.contains(event.target)) {
|
|
mobileMenu.classList.add('hidden');
|
|
const svg = mobileMenuButton.querySelector('svg');
|
|
svg.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>';
|
|
}
|
|
});
|
|
|
|
window.addEventListener('resize', function() {
|
|
if (window.innerWidth >= 1024) {
|
|
mobileMenu.classList.add('hidden');
|
|
const svg = mobileMenuButton.querySelector('svg');
|
|
svg.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>';
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const jasaBtn = document.getElementById('dropdown-jasa-button');
|
|
const jasaMenu = document.getElementById('dropdown-jasa-menu');
|
|
const jasaWrapper = document.getElementById('dropdown-jasa');
|
|
|
|
let submenuTimeout;
|
|
|
|
jasaWrapper.addEventListener('mouseenter', function() {
|
|
clearTimeout(submenuTimeout);
|
|
jasaMenu.classList.add('opacity-100', 'pointer-events-auto', 'scale-100');
|
|
jasaMenu.classList.remove('opacity-0', 'pointer-events-none', 'scale-95');
|
|
});
|
|
|
|
jasaWrapper.addEventListener('mouseleave', function() {
|
|
submenuTimeout = setTimeout(function() {
|
|
jasaMenu.classList.remove('opacity-100', 'pointer-events-auto', 'scale-100');
|
|
jasaMenu.classList.add('opacity-0', 'pointer-events-none', 'scale-95');
|
|
}, 200);
|
|
});
|
|
|
|
jasaBtn.addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
const isOpen = jasaMenu.classList.contains('opacity-100');
|
|
if (isOpen) {
|
|
jasaMenu.classList.remove('opacity-100', 'pointer-events-auto', 'scale-100');
|
|
jasaMenu.classList.add('opacity-0', 'pointer-events-none', 'scale-95');
|
|
} else {
|
|
jasaMenu.classList.add('opacity-100', 'pointer-events-auto', 'scale-100');
|
|
jasaMenu.classList.remove('opacity-0', 'pointer-events-none', 'scale-95');
|
|
}
|
|
});
|
|
|
|
document.addEventListener('click', function(e) {
|
|
if (!jasaWrapper.contains(e.target)) {
|
|
jasaMenu.classList.remove('opacity-100', 'pointer-events-auto', 'scale-100');
|
|
jasaMenu.classList.add('opacity-0', 'pointer-events-none', 'scale-95');
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
<script>
|
|
function toggleMobileSubmenu(button) {
|
|
const submenu = button.nextElementSibling;
|
|
|
|
submenu.classList.toggle('hidden');
|
|
|
|
const arrow = button.querySelector('svg');
|
|
|
|
if (submenu.classList.contains('hidden')) {
|
|
arrow.style.transform = 'rotate(0deg)';
|
|
} else {
|
|
arrow.style.transform = 'rotate(180deg)';
|
|
}
|
|
|
|
submenu.style.maxHeight = submenu.classList.contains('hidden') ? '0' : submenu.scrollHeight + 'px';
|
|
|
|
event.stopPropagation();
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const mobileDropdownButtons = document.querySelectorAll('.mobile-dropdown button');
|
|
|
|
mobileDropdownButtons.forEach(button => {
|
|
button.addEventListener('click', function() {
|
|
mobileDropdownButtons.forEach(otherButton => {
|
|
if (otherButton !== button) {
|
|
const otherSubmenu = otherButton.nextElementSibling;
|
|
if (!otherSubmenu.classList.contains('hidden')) {
|
|
otherSubmenu.classList.add('hidden');
|
|
const otherArrow = otherButton.querySelector('svg');
|
|
otherArrow.style.transform = 'rotate(0deg)';
|
|
}
|
|
}
|
|
});
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
</register-block> |