191 lines
9.2 KiB
PHP
191 lines
9.2 KiB
PHP
<!-- Navigation Links untuk Siswa - Versi Mobile Friendly -->
|
|
|
|
<!-- Desktop Navigation (sembunyi di HP) -->
|
|
<div class="hidden sm:flex sm:space-x-8 sm:-my-px sm:ml-10">
|
|
<!-- Dashboard -->
|
|
<a href="{{ route('dashboard') }}"
|
|
class="inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium leading-5 focus:outline-none transition duration-150 ease-in-out {{ request()->routeIs('dashboard') ? 'border-blue-400 text-gray-900 focus:border-blue-700' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:text-gray-700 focus:border-gray-300' }}">
|
|
<i class="fas fa-home mr-1"></i>
|
|
Dashboard
|
|
</a>
|
|
|
|
<!-- Input Harian -->
|
|
<a href="{{ route('siswa.input') }}"
|
|
class="inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium leading-5 focus:outline-none transition duration-150 ease-in-out {{ request()->routeIs('siswa.input*') ? 'border-blue-400 text-gray-900 focus:border-blue-700' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:text-gray-700 focus:border-gray-300' }}">
|
|
<i class="fas fa-pen mr-1"></i>
|
|
Input Harian
|
|
</a>
|
|
|
|
<!-- Rekomendasi -->
|
|
<a href="{{ route('siswa.recommendations') }}"
|
|
class="inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium leading-5 focus:outline-none transition duration-150 ease-in-out {{ request()->routeIs('siswa.recommendations*') ? 'border-blue-400 text-gray-900 focus:border-blue-700' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:text-gray-700 focus:border-gray-300' }}">
|
|
<i class="fas fa-lightbulb mr-1"></i>
|
|
Rekomendasi
|
|
</a>
|
|
|
|
<!-- Visualisasi -->
|
|
<a href="{{ route('siswa.visualization') }}"
|
|
class="inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium leading-5 focus:outline-none transition duration-150 ease-in-out {{ request()->routeIs('siswa.visualization') ? 'border-blue-400 text-gray-900 focus:border-blue-700' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:text-gray-700 focus:border-gray-300' }}">
|
|
<i class="fas fa-chart-bar mr-1"></i>
|
|
Visualisasi
|
|
</a>
|
|
|
|
<!-- Riwayat -->
|
|
<a href="{{ route('siswa.history') }}"
|
|
class="inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium leading-5 focus:outline-none transition duration-150 ease-in-out {{ request()->routeIs('siswa.history') ? 'border-blue-400 text-gray-900 focus:border-blue-700' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:text-gray-700 focus:border-gray-300' }}">
|
|
<i class="fas fa-history mr-1"></i>
|
|
Riwayat
|
|
</a>
|
|
|
|
<!-- Koneksi Orang Tua -->
|
|
<a href="{{ route('siswa.parent-connection') }}"
|
|
class="inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium leading-5 focus:outline-none transition duration-150 ease-in-out {{ request()->routeIs('siswa.parent-connection*') ? 'border-blue-400 text-gray-900 focus:border-blue-700' : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:text-gray-700 focus:border-gray-300' }}">
|
|
<i class="fas fa-link mr-1"></i>
|
|
Koneksi
|
|
</a>
|
|
</div>
|
|
|
|
<!-- User Menu (Desktop) -->
|
|
<div class="hidden sm:flex items-center space-x-3 ml-auto">
|
|
<span class="text-sm text-gray-700">{{ auth()->user()->name }}</span>
|
|
<a href="{{ route('profile.edit') }}" class="text-blue-600 hover:text-blue-800" title="Edit Profil">
|
|
<i class="fas fa-user-edit"></i>
|
|
</a>
|
|
<form method="POST" action="{{ route('logout') }}" class="inline">
|
|
@csrf
|
|
<button type="submit" class="text-red-600 hover:text-red-800">
|
|
<i class="fas fa-sign-out-alt"></i>
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Mobile Navigation - Hanya muncul di HP -->
|
|
<div class="sm:hidden" id="mobile-menu">
|
|
<!-- Tombol Hamburger -->
|
|
<div class="flex items-center justify-between px-4 py-3 bg-white border-t">
|
|
<div class="flex items-center space-x-2">
|
|
<span class="text-lg font-bold text-blue-600">Menu Siswa</span>
|
|
<span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded-full">Siswa</span>
|
|
</div>
|
|
<button onclick="toggleMobileMenu()" class="text-gray-500 hover:text-gray-700 focus:outline-none p-2">
|
|
<svg class="h-6 w-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>
|
|
|
|
<!-- Menu Items (hidden by default) -->
|
|
<div id="mobileMenuItems" class="hidden bg-white shadow-lg border-t max-h-[80vh] overflow-y-auto">
|
|
<div class="px-2 py-3 space-y-1">
|
|
<!-- Dashboard -->
|
|
<a href="{{ route('dashboard') }}"
|
|
class="block px-3 py-3 rounded-md text-base font-medium {{ request()->routeIs('dashboard') ? 'bg-blue-100 text-blue-700' : 'text-gray-700 hover:bg-gray-100' }}">
|
|
<i class="fas fa-home mr-3 w-5 text-blue-600"></i>
|
|
Dashboard
|
|
</a>
|
|
|
|
<!-- Input Harian -->
|
|
<a href="{{ route('siswa.input') }}"
|
|
class="block px-3 py-3 rounded-md text-base font-medium {{ request()->routeIs('siswa.input*') ? 'bg-blue-100 text-blue-700' : 'text-gray-700 hover:bg-gray-100' }}">
|
|
<i class="fas fa-pen mr-3 w-5 text-blue-600"></i>
|
|
Input Harian
|
|
</a>
|
|
|
|
<!-- Rekomendasi -->
|
|
<a href="{{ route('siswa.recommendations') }}"
|
|
class="block px-3 py-3 rounded-md text-base font-medium {{ request()->routeIs('siswa.recommendations*') ? 'bg-blue-100 text-blue-700' : 'text-gray-700 hover:bg-gray-100' }}">
|
|
<i class="fas fa-lightbulb mr-3 w-5 text-yellow-600"></i>
|
|
Rekomendasi
|
|
</a>
|
|
|
|
<!-- Visualisasi -->
|
|
<a href="{{ route('siswa.visualization') }}"
|
|
class="block px-3 py-3 rounded-md text-base font-medium {{ request()->routeIs('siswa.visualization') ? 'bg-blue-100 text-blue-700' : 'text-gray-700 hover:bg-gray-100' }}">
|
|
<i class="fas fa-chart-bar mr-3 w-5 text-green-600"></i>
|
|
Visualisasi
|
|
</a>
|
|
|
|
<!-- Riwayat -->
|
|
<a href="{{ route('siswa.history') }}"
|
|
class="block px-3 py-3 rounded-md text-base font-medium {{ request()->routeIs('siswa.history') ? 'bg-blue-100 text-blue-700' : 'text-gray-700 hover:bg-gray-100' }}">
|
|
<i class="fas fa-history mr-3 w-5 text-purple-600"></i>
|
|
Riwayat
|
|
</a>
|
|
|
|
<!-- Koneksi Orang Tua -->
|
|
<a href="{{ route('siswa.parent-connection') }}"
|
|
class="block px-3 py-3 rounded-md text-base font-medium {{ request()->routeIs('siswa.parent-connection*') ? 'bg-blue-100 text-blue-700' : 'text-gray-700 hover:bg-gray-100' }}">
|
|
<i class="fas fa-link mr-3 w-5 text-indigo-600"></i>
|
|
Koneksi Orang Tua
|
|
</a>
|
|
|
|
<!-- Divider -->
|
|
<div class="border-t border-gray-200 my-3"></div>
|
|
|
|
<!-- Edit Profil -->
|
|
<a href="{{ route('profile.edit') }}"
|
|
class="block px-3 py-3 rounded-md text-base font-medium text-blue-600 hover:bg-blue-50">
|
|
<i class="fas fa-user-edit mr-3 w-5"></i>
|
|
Edit Profil
|
|
</a>
|
|
|
|
<!-- Logout -->
|
|
<form method="POST" action="{{ route('logout') }}" class="block">
|
|
@csrf
|
|
<button type="submit" class="w-full text-left px-3 py-3 rounded-md text-base font-medium text-red-600 hover:bg-red-50">
|
|
<i class="fas fa-sign-out-alt mr-3 w-5"></i>
|
|
Logout ({{ auth()->user()->name }})
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// Toggle mobile menu
|
|
function toggleMobileMenu() {
|
|
const menu = document.getElementById('mobileMenuItems');
|
|
menu.classList.toggle('hidden');
|
|
}
|
|
|
|
// Close menu when clicking a link
|
|
document.querySelectorAll('#mobileMenuItems a, #mobileMenuItems button').forEach(item => {
|
|
item.addEventListener('click', function() {
|
|
setTimeout(() => {
|
|
document.getElementById('mobileMenuItems').classList.add('hidden');
|
|
}, 100);
|
|
});
|
|
});
|
|
|
|
// Close menu when clicking outside
|
|
document.addEventListener('click', function(event) {
|
|
const menu = document.getElementById('mobileMenuItems');
|
|
const hamburgerButton = event.target.closest('button');
|
|
|
|
if (!menu.classList.contains('hidden') &&
|
|
!event.target.closest('#mobile-menu') &&
|
|
!hamburgerButton) {
|
|
menu.classList.add('hidden');
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
/* Animasi untuk mobile menu */
|
|
#mobileMenuItems {
|
|
transition: all 0.3s ease;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
|
|
/* Custom scrollbar */
|
|
#mobileMenuItems::-webkit-scrollbar {
|
|
width: 4px;
|
|
}
|
|
#mobileMenuItems::-webkit-scrollbar-track {
|
|
background: #f1f1f1;
|
|
}
|
|
#mobileMenuItems::-webkit-scrollbar-thumb {
|
|
background: #93c5fd;
|
|
border-radius: 4px;
|
|
}
|
|
</style> |