212 lines
9.0 KiB
PHP
212 lines
9.0 KiB
PHP
<div class="w-full fixed top-0 z-50 bg-[#F8F4DF] shadow-md">
|
|
<nav class="flex justify-between py-3 sm:py-5 px-3 sm:px-4 md:px-14 items-center border-b-2 border-gray-700">
|
|
<a href="#">
|
|
<img src="{{ asset('images/logo.svg') }}" alt="logo" class="h-8 sm:h-9 md:h-10" />
|
|
</a>
|
|
|
|
<ul class="hidden lg:flex flex-row space-x-7 text-base font-medium">
|
|
<li><a href="#" class="nav-link text-gray-600 hover:text-gray-700">Beranda</a></li>
|
|
<li><a href="#article" class="nav-link text-gray-600 hover:text-gray-700">Artikel</a></li>
|
|
<li><a href="#forum" class="nav-link text-gray-600 hover:text-gray-700">Forum</a></li>
|
|
<li><a href="#about-us" class="nav-link text-gray-600 hover:text-gray-700">Tentang Kami</a></li>
|
|
<li><a href="#faq" class="nav-link text-gray-600 hover:text-gray-700">FAQ</a></li>
|
|
</ul>
|
|
|
|
<button id="mobile-menu-button" class="block lg:hidden text-gray-700" aria-label="Toggle menu" type="button">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 menu-open-icon" fill="none" viewBox="0 0 24 24"
|
|
stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
|
|
</svg>
|
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 menu-close-icon hidden" fill="none"
|
|
viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
|
|
<div class="hidden lg:flex items-center space-x-6">
|
|
@if (Route::has('login'))
|
|
<a href="{{ route('login') }}">
|
|
<x-primary-button
|
|
class="ring-2 ring-gray-700 shadow-[4px_4px_0px_2px_#374151] hover:shadow-[2px_2px_0px_2px_#374151] hover:translate-y-0.5 hover:translate-x-0.5 bg-pewterBlue text-gray-700">
|
|
Masuk
|
|
</x-primary-button>
|
|
</a>
|
|
<div class="h-7 border-l-2 border-gray-700"></div>
|
|
<a href="{{ route('register') }}">
|
|
<x-primary-button
|
|
class="ring-2 ring-gray-700 shadow-[4px_4px_0px_2px_#374151] text-white hover:shadow-[2px_2px_0px_2px_#374151] hover:translate-y-0.5 hover:translate-x-0.5 bg-orangeCrayola">
|
|
Daftar
|
|
</x-primary-button>
|
|
</a>
|
|
@endif
|
|
</div>
|
|
</nav>
|
|
|
|
<div id="mobile-menu"
|
|
class="mobile-menu-container hidden lg:hidden bg-[#F8F4DF] px-3 py-3 space-y-3 shadow-md border-t border-gray-300 max-h-[80vh] overflow-y-auto">
|
|
<ul class="space-y-2 text-sm font-medium">
|
|
<li><a href="#" class="mobile-nav-link block text-gray-600 hover:text-gray-700">Beranda</a></li>
|
|
<li><a href="#article" class="mobile-nav-link block text-gray-600 hover:text-gray-700">Artikel</a></li>
|
|
<li><a href="#forum" class="mobile-nav-link block text-gray-600 hover:text-gray-700">Forum</a></li>
|
|
<li><a href="#about-us" class="mobile-nav-link block text-gray-600 hover:text-gray-700">Tentang Kami</a>
|
|
</li>
|
|
<li><a href="#faq" class="mobile-nav-link block text-gray-600 hover:text-gray-700">FAQ</a></li>
|
|
</ul>
|
|
<div class="flex flex-col space-y-4 pt-3">
|
|
@if (Route::has('login'))
|
|
<a href="{{ route('login') }}">
|
|
<x-primary-button
|
|
class="w-full justify-center text-sm ring-2 ring-gray-700 shadow-[3px_3px_0px_1px_#374151] hover:translate-y-0.5 hover:translate-x-0.5 bg-pewterBlue text-gray-700">
|
|
Masuk
|
|
</x-primary-button>
|
|
</a>
|
|
<a href="{{ route('register') }}">
|
|
<x-primary-button
|
|
class="w-full justify-center text-sm ring-2 ring-gray-700 shadow-[3px_3px_0px_1px_#374151] text-white hover:translate-y-0.5 hover:translate-x-0.5 bg-orangeCrayola">
|
|
Daftar
|
|
</x-primary-button>
|
|
</a>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.mobile-menu-container {
|
|
transition: all 0.3s ease-in-out;
|
|
transform-origin: top center;
|
|
transform: scaleY(0);
|
|
opacity: 0;
|
|
max-height: 0;
|
|
}
|
|
|
|
.mobile-menu-active {
|
|
transform: scaleY(1);
|
|
opacity: 1;
|
|
max-height: 80vh;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', initNavbar);
|
|
|
|
if (typeof window.Livewire !== 'undefined') {
|
|
document.addEventListener('livewire:load', initNavbar);
|
|
}
|
|
|
|
document.addEventListener('turbolinks:load', initNavbar);
|
|
|
|
function initNavbar() {
|
|
const mobileMenuButton = document.getElementById('mobile-menu-button');
|
|
const mobileMenu = document.getElementById('mobile-menu');
|
|
|
|
if (!mobileMenuButton || !mobileMenu) return;
|
|
|
|
const menuOpenIcon = mobileMenuButton.querySelector('.menu-open-icon');
|
|
const menuCloseIcon = mobileMenuButton.querySelector('.menu-close-icon');
|
|
const navLinks = document.querySelectorAll('.nav-link, .mobile-nav-link');
|
|
const sections = document.querySelectorAll('section[id]');
|
|
|
|
function toggleMenuIcons(isOpen) {
|
|
if (!menuOpenIcon || !menuCloseIcon) return;
|
|
|
|
if (isOpen) {
|
|
menuOpenIcon.classList.add('hidden');
|
|
menuCloseIcon.classList.remove('hidden');
|
|
} else {
|
|
menuOpenIcon.classList.remove('hidden');
|
|
menuCloseIcon.classList.add('hidden');
|
|
}
|
|
}
|
|
|
|
function toggleMobileMenu() {
|
|
if (mobileMenu.classList.contains('hidden')) {
|
|
mobileMenu.classList.remove('hidden');
|
|
mobileMenu.offsetHeight;
|
|
mobileMenu.classList.add('mobile-menu-active');
|
|
toggleMenuIcons(true);
|
|
} else {
|
|
mobileMenu.classList.remove('mobile-menu-active');
|
|
toggleMenuIcons(false);
|
|
setTimeout(() => {
|
|
mobileMenu.classList.add('hidden');
|
|
}, 300);
|
|
}
|
|
}
|
|
|
|
mobileMenuButton.removeEventListener('click', toggleMobileMenu);
|
|
mobileMenuButton.addEventListener('click', toggleMobileMenu);
|
|
|
|
document.querySelectorAll('.mobile-nav-link').forEach(link => {
|
|
link.removeEventListener('click', closeMobileMenuOnClick);
|
|
link.addEventListener('click', closeMobileMenuOnClick);
|
|
});
|
|
|
|
function closeMobileMenuOnClick() {
|
|
mobileMenu.classList.remove('mobile-menu-active');
|
|
toggleMenuIcons(false);
|
|
setTimeout(() => {
|
|
mobileMenu.classList.add('hidden');
|
|
}, 300);
|
|
}
|
|
|
|
document.removeEventListener('click', documentClickHandler);
|
|
document.addEventListener('click', documentClickHandler);
|
|
|
|
function documentClickHandler(e) {
|
|
if (!mobileMenuButton.contains(e.target) &&
|
|
!mobileMenu.contains(e.target) &&
|
|
!mobileMenu.classList.contains('hidden')) {
|
|
closeMobileMenuOnClick();
|
|
}
|
|
}
|
|
|
|
if (sections.length > 0) {
|
|
const setActiveLink = () => {
|
|
let scrollY = window.scrollY;
|
|
let found = false;
|
|
|
|
sections.forEach((section) => {
|
|
const top = section.offsetTop - 100;
|
|
const height = section.offsetHeight;
|
|
const id = section.getAttribute('id');
|
|
|
|
if (scrollY >= top && scrollY < top + height) {
|
|
navLinks.forEach(link => link.classList.remove('font-bold', 'text-gray-700'));
|
|
document.querySelectorAll(`a[href="#${id}"]`).forEach(link => link.classList
|
|
.add('font-bold', 'text-gray-700'));
|
|
found = true;
|
|
}
|
|
});
|
|
|
|
if (!found && scrollY < 100) {
|
|
navLinks.forEach(link => link.classList.remove('font-bold', 'text-gray-700'));
|
|
document.querySelectorAll('.nav-link:first-child, .mobile-nav-link:first-child').forEach(
|
|
link => {
|
|
link.classList.add('font-bold', 'text-gray-700');
|
|
});
|
|
}
|
|
};
|
|
|
|
setActiveLink();
|
|
window.removeEventListener('scroll', setActiveLink);
|
|
window.addEventListener('scroll', setActiveLink);
|
|
}
|
|
|
|
window.removeEventListener('resize', handleResize);
|
|
window.addEventListener('resize', handleResize);
|
|
|
|
function handleResize() {
|
|
if (window.innerWidth >= 1024) {
|
|
mobileMenu.classList.add('hidden');
|
|
toggleMenuIcons(false);
|
|
}
|
|
}
|
|
}
|
|
|
|
if (document.readyState === 'complete' || document.readyState === 'interactive') {
|
|
setTimeout(initNavbar, 1);
|
|
}
|
|
</script>
|