MIF_E31231003/resources/views/partials/navbar-landing.blade.php

169 lines
8.4 KiB
PHP

@php
$isSpkPage = request()->routeIs('siswa.tes.*');
$isLanding = request()->routeIs('landing.home');
$isProfile = request()->routeIs('siswa.profile*');
$isLoggedIn = auth()->check();
$roleId = $isLoggedIn ? auth()->user()->role_id : null;
$isAdmin = $roleId == 1;
$isGuruBk = $roleId == 2;
$isSiswa = $roleId == 3;
@endphp
<!-- {{-- TOP INFO BAR --}}
<div class="top-bar text-white py-2 px-4">
<div class="max-w-7xl mx-auto flex flex-wrap justify-between items-center gap-2">
<div class="flex flex-wrap items-center gap-4 text-xs text-blue-200">
<span>📞 (0331) 487550</span>
<span class="hidden sm:inline">✉️ smkn2jember@gmail.com</span>
<span class="hidden md:inline">📍 Jl. Tawangmangu No. 52, Jember</span>
</div>
<div class="flex items-center gap-3">
@auth
<a href="{{ url('/dashboard') }}" class="text-xs text-blue-200 hover:text-white">Dashboard</a>
@else
<a href="{{ route('login') }}" class="text-xs text-blue-200 hover:text-white">Login</a>
<a href="{{ route('register') }}" class="text-xs bg-amber-400 text-gray-900 font-semibold px-3 py-1 rounded hover:bg-amber-300 transition-colors">
Daftar
</a>
@endauth
</div>
</div>
</div> -->
{{-- MAIN HEADER --}}
<header class="main-header text-white shadow-lg">
<div class="max-w-7xl mx-auto px-4 py-3">
<div class="flex items-center justify-between">
<div class="flex items-center gap-3">
<div class="w-12 h-12 rounded-full bg-white flex items-center justify-center shadow-md overflow-hidden flex-shrink-0 p-1.5">
<img src="{{ asset('Assets/Logo_SMKN2Jember.png') }}" alt="Logo SMKN 2 Jember" class="w-full h-full object-contain">
</div>
<div>
<div class="font-bold text-sm sm:text-base leading-tight">SMK NEGERI 2 JEMBER</div>
<div class="text-blue-200 text-xs">Sistem Pendukung Keputusan Pemilihan Jurusan</div>
</div>
</div>
{{-- DESKTOP NAV --}}
<nav class="hidden md:flex items-center gap-1">
<a href="{{ route('landing.home') }}" class="nav-link-custom {{ $isLanding ? 'active' : '' }}">Beranda</a>
@if($isSiswa)
<a href="{{ route('siswa.profile') }}" class="nav-link-custom {{ $isProfile ? 'active' : '' }}">Profil</a>
<div class="relative group">
<button type="button" class="nav-link-custom flex items-center gap-1 {{ $isSpkPage ? 'active' : '' }}">
SPK Jurusan
<svg class="w-3 h-3" 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="absolute top-full left-0 w-52 bg-white text-gray-800 rounded-lg shadow-xl py-2 z-50 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 text-xs">
<a href="{{ route('siswa.tes.index') }}" class="block px-4 py-2 hover:bg-blue-50">Cek Jurusan</a>
<a href="{{ route('siswa.history') }}" class="block px-4 py-2 hover:bg-blue-50">History</a>
</div>
</div>
@endif
<a href="{{ route('artikel.index') }}" class="nav-link-custom {{ request()->routeIs('artikel.*') ? 'active' : '' }}">Artikel</a>
<a href="{{ route('landing.home') }}#kontak" class="nav-link-custom">Kontak</a>
@auth
@if($isAdmin)
<a href="{{ route('admin.dashboard') }}"
class="ml-2 px-4 py-1.5 bg-amber-400 text-gray-900 font-semibold text-xs rounded-lg hover:bg-amber-300 transition-colors">
Dashboard
</a>
@elseif($isGuruBk)
<a href="{{ route('bk.dashboard') }}"
class="ml-2 px-4 py-1.5 bg-amber-400 text-gray-900 font-semibold text-xs rounded-lg hover:bg-amber-300 transition-colors">
Dashboard
</a>
@endif
<form method="POST" action="{{ route('logout') }}" class="ml-2 inline">
@csrf
<button type="submit"
class="px-4 py-1.5 bg-white/10 text-white font-semibold text-xs rounded-lg hover:bg-white/20 transition-colors">
Logout
</button>
</form>
@else
<a href="{{ route('login') }}" class="ml-2 px-4 py-1.5 bg-white/10 text-white font-semibold text-xs rounded-lg hover:bg-white/20 transition-colors">
Login
</a>
<a href="{{ route('register') }}" class="ml-2 px-4 py-1.5 bg-amber-400 text-gray-900 font-semibold text-xs rounded-lg hover:bg-amber-300 transition-colors">
Daftar
</a>
@endauth
</nav>
{{-- HAMBURGER --}}
<button id="hamburger" class="md:hidden p-2 rounded-lg hover:bg-white/10 transition-colors">
<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"/>
</svg>
</button>
</div>
{{-- MOBILE NAV --}}
<div id="mobile-menu" class="md:hidden mt-3 pb-2 border-t border-white/20" style="display:none;">
<div class="flex flex-col gap-1 pt-3">
<a href="{{ route('landing.home') }}" class="nav-link-custom {{ $isLanding ? 'active' : '' }}">Beranda</a>
@if($isSiswa)
<a href="{{ route('siswa.profile') }}" class="nav-link-custom {{ $isProfile ? 'active' : '' }}">Profil</a>
<a href="{{ route('siswa.tes.index') }}" class="nav-link-custom {{ $isSpkPage ? 'active' : '' }}">SPK Jurusan</a>
<a href="{{ route('siswa.history') }}" class="nav-link-custom">History</a>
@endif
<a href="{{ route('artikel.index') }}" class="nav-link-custom {{ request()->routeIs('artikel.*') ? 'active' : '' }}">Artikel</a>
<a href="{{ route('landing.home') }}#kontak" class="nav-link-custom">Kontak</a>
@auth
@if($isAdmin)
<a href="{{ route('admin.dashboard') }}"
class="nav-link-custom">
Dashboard
</a>
@elseif($isGuruBk)
<a href="{{ route('bk.dashboard') }}"
class="nav-link-custom">
Dashboard
</a>
@endif
<form method="POST" action="{{ route('logout') }}" class="mt-2">
@csrf
<button type="submit"
class="w-full px-4 py-2 bg-white/10 text-white font-semibold text-xs rounded-lg hover:bg-white/20 transition-colors text-left">
Logout
</button>
</form>
@else
<a href="{{ route('login') }}" class="nav-link-custom">Login</a>
<a href="{{ route('register') }}" class="nav-link-custom">Daftar</a>
@endauth
</div>
</div>
</div>
</header>
<script>
document.addEventListener('DOMContentLoaded', function () {
const hamburger = document.getElementById('hamburger');
const mobileMenu = document.getElementById('mobile-menu');
hamburger.addEventListener('click', function () {
// cek display saat ini
if (mobileMenu.style.display === 'none' || mobileMenu.style.display === '') {
mobileMenu.style.display = 'block';
} else {
mobileMenu.style.display = 'none';
}
});
});
</script>