169 lines
7.4 KiB
PHP
169 lines
7.4 KiB
PHP
<!-- Navigation Links untuk Orang Tua - Versi Sederhana & Responsif -->
|
|
|
|
<!-- Desktop Navigation (sembunyi di HP) -->
|
|
<div class="hidden sm:flex sm:items-center sm:space-x-1 sm:-my-px sm:ml-6">
|
|
<!-- Dashboard -->
|
|
<a href="{{ route('dashboard') }}"
|
|
class="flex items-center px-3 py-2 rounded-lg text-sm font-medium transition-all duration-200 {{ request()->routeIs('dashboard') ? 'bg-purple-100 text-purple-700' : 'text-gray-700 hover:bg-purple-50 hover:text-purple-600' }}">
|
|
<i class="fas fa-home mr-2"></i>
|
|
Dashboard
|
|
@if(request()->routeIs('dashboard'))
|
|
<span class="ml-2 w-1.5 h-1.5 bg-purple-600 rounded-full"></span>
|
|
@endif
|
|
</a>
|
|
|
|
|
|
|
|
<!-- Koneksi Anak -->
|
|
<a href="{{ route('orangtua.children') }}"
|
|
class="flex items-center px-3 py-2 rounded-lg text-sm font-medium transition-all duration-200 {{ request()->routeIs('orangtua.children*') ? 'bg-purple-100 text-purple-700' : 'text-gray-700 hover:bg-purple-50 hover:text-purple-600' }}">
|
|
<i class="fas fa-link mr-2"></i>
|
|
Koneksi Anak
|
|
@if(request()->routeIs('orangtua.children*'))
|
|
<span class="ml-2 w-1.5 h-1.5 bg-purple-600 rounded-full"></span>
|
|
@endif
|
|
</a>
|
|
</div>
|
|
|
|
<!-- User Menu (Desktop) -->
|
|
<div class="hidden sm:flex items-center space-x-3 ml-auto">
|
|
<!-- Nama User (hidden di mobile) -->
|
|
<span class="text-sm text-gray-600 hidden lg:inline">{{ auth()->user()->name }}</span>
|
|
|
|
<!-- Role Badge -->
|
|
<span class="text-xs px-2 py-1 bg-purple-100 text-purple-700 rounded-full font-medium">
|
|
Orang Tua
|
|
</span>
|
|
|
|
<!-- Profile Icon -->
|
|
<a href="{{ route('profile.edit') }}"
|
|
class="p-2 text-gray-500 hover:text-purple-600 hover:bg-purple-50 rounded-lg transition-colors"
|
|
title="Edit Profil">
|
|
<i class="fas fa-user-cog text-lg"></i>
|
|
</a>
|
|
|
|
<!-- Logout -->
|
|
<form method="POST" action="{{ route('logout') }}" class="inline">
|
|
@csrf
|
|
<button type="submit"
|
|
class="p-2 text-gray-500 hover:text-red-600 hover:bg-red-50 rounded-lg transition-colors"
|
|
title="Logout">
|
|
<i class="fas fa-sign-out-alt text-lg"></i>
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Mobile Navigation - Hanya muncul di HP -->
|
|
<div class="sm:hidden" x-data="{ mobileMenuOpen: false }">
|
|
<!-- Header Mobile -->
|
|
<div class="flex items-center justify-between px-4 py-2 bg-white border-b border-gray-200">
|
|
|
|
|
|
<!-- Right Section -->
|
|
<div class="flex items-center space-x-2">
|
|
<!-- Role Badge -->
|
|
<span class="text-xs px-2 py-1 bg-purple-100 text-purple-700 rounded-full">
|
|
Orang Tua
|
|
</span>
|
|
|
|
<!-- Hamburger Button -->
|
|
<button @click="mobileMenuOpen = !mobileMenuOpen"
|
|
class="p-2 text-gray-500 hover:text-purple-600 hover:bg-purple-50 rounded-lg transition-colors">
|
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path x-show="!mobileMenuOpen" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
|
|
<path x-show="mobileMenuOpen" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" style="display: none;"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mobile Menu Dropdown -->
|
|
<div x-show="mobileMenuOpen"
|
|
x-transition:enter="transition ease-out duration-200"
|
|
x-transition:enter-start="opacity-0 -translate-y-2"
|
|
x-transition:enter-end="opacity-100 translate-y-0"
|
|
x-transition:leave="transition ease-in duration-150"
|
|
x-transition:leave-start="opacity-100 translate-y-0"
|
|
x-transition:leave-end="opacity-0 -translate-y-2"
|
|
@click.away="mobileMenuOpen = false"
|
|
class="absolute left-0 right-0 bg-white shadow-lg border-t border-gray-200 z-50">
|
|
|
|
<div class="py-2 px-3 space-y-1">
|
|
<!-- Dashboard -->
|
|
<a href="{{ route('dashboard') }}"
|
|
@click="mobileMenuOpen = false"
|
|
class="flex items-center px-4 py-3 rounded-xl text-base font-medium {{ request()->routeIs('dashboard') ? 'bg-purple-100 text-purple-700' : 'text-gray-700 hover:bg-purple-50' }}">
|
|
<i class="fas fa-home w-6 text-center {{ request()->routeIs('dashboard') ? 'text-purple-600' : 'text-gray-500' }}"></i>
|
|
<span class="ml-3">Dashboard</span>
|
|
@if(request()->routeIs('dashboard'))
|
|
<span class="ml-auto text-xs bg-purple-200 text-purple-700 px-2 py-1 rounded-full">Active</span>
|
|
@endif
|
|
</a>
|
|
|
|
|
|
<!-- Koneksi Anak -->
|
|
<a href="{{ route('orangtua.children') }}"
|
|
@click="mobileMenuOpen = false"
|
|
class="flex items-center px-4 py-3 rounded-xl text-base font-medium {{ request()->routeIs('orangtua.children*') ? 'bg-purple-100 text-purple-700' : 'text-gray-700 hover:bg-purple-50' }}">
|
|
<i class="fas fa-link w-6 text-center {{ request()->routeIs('orangtua.children*') ? 'text-purple-600' : 'text-gray-500' }}"></i>
|
|
<span class="ml-3">Koneksi Anak</span>
|
|
@if(request()->routeIs('orangtua.children*'))
|
|
<span class="ml-auto text-xs bg-purple-200 text-purple-700 px-2 py-1 rounded-full">Active</span>
|
|
@endif
|
|
</a>
|
|
|
|
<!-- Divider -->
|
|
<div class="border-t border-gray-200 my-2"></div>
|
|
|
|
<!-- Edit Profil -->
|
|
<a href="{{ route('profile.edit') }}"
|
|
@click="mobileMenuOpen = false"
|
|
class="flex items-center px-4 py-3 rounded-xl text-base font-medium text-gray-700 hover:bg-purple-50">
|
|
<i class="fas fa-user-cog w-6 text-center text-gray-500"></i>
|
|
<span class="ml-3">Edit Profil</span>
|
|
</a>
|
|
|
|
<!-- Logout -->
|
|
<form method="POST" action="{{ route('logout') }}" class="block">
|
|
@csrf
|
|
<button type="submit"
|
|
@click="mobileMenuOpen = false"
|
|
class="w-full flex items-center px-4 py-3 rounded-xl text-base font-medium text-red-600 hover:bg-red-50">
|
|
<i class="fas fa-sign-out-alt w-6 text-center"></i>
|
|
<span class="ml-3">Logout</span>
|
|
<span class="ml-auto text-xs text-gray-500 truncate max-w-[120px]">{{ auth()->user()->name }}</span>
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Alpine.js untuk mobile menu (pastikan sudah di-include di layout utama) -->
|
|
<script>
|
|
// Fallback jika Alpine.js belum di-load
|
|
document.addEventListener('alpine:init', () => {
|
|
console.log('Alpine.js initialized for parent navigation');
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
/* Smooth transitions untuk mobile menu */
|
|
[x-cloak] { display: none !important; }
|
|
|
|
/* Mobile menu animations */
|
|
[x-transition\:enter] {
|
|
transition-property: opacity, transform;
|
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
[x-transition\:leave] {
|
|
transition-property: opacity, transform;
|
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
/* Better touch targets for mobile */
|
|
@media (max-width: 640px) {
|
|
.sm\:hidden a, .sm\:hidden button {
|
|
min-height: 44px;
|
|
}
|
|
}
|
|
</style> |