antv
91 lines
5.0 KiB
PHP
91 lines
5.0 KiB
PHP
@props(['active' => false])
|
|
|
|
<aside class="sidebar flex flex-col h-full bg-white border-r border-gray-100 shadow-sm transition-transform duration-300 w-64 fixed inset-y-0 left-0 z-40 lg:relative lg:translate-x-0 -translate-x-full" aria-label="Main navigation">
|
|
<div class="p-6 flex items-center justify-between shrink-0">
|
|
<img src="{{ asset('images/logo.png') }}" alt="GMO-Z.com RUNSYSTEM" class="h-6 w-auto object-contain">
|
|
<!-- Mobile hamburger button/close -->
|
|
<button id="sidebar-close" class="lg:hidden p-2 text-gray-500 hover:bg-gray-100 rounded-md focus:outline-none" aria-label="Close navigation">
|
|
<svg class="w-5 h-5" 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>
|
|
|
|
<nav class="px-4 space-y-1.5 overflow-y-auto flex-1 pb-4">
|
|
<!-- TABS CHUNG -->
|
|
<x-sidebar-item href="{{ route('user.dashboard') }}" :active="request()->routeIs('user.dashboard')" icon="home">
|
|
Trang chủ
|
|
</x-sidebar-item>
|
|
|
|
<x-sidebar-item href="{{ route('user.send') }}" :active="request()->routeIs('user.send')" icon="paper-plane-send">
|
|
Gửi Thanks card
|
|
</x-sidebar-item>
|
|
|
|
<x-sidebar-item href="{{ route('user.received') }}" :active="request()->routeIs('user.received')" icon="heart">
|
|
Thanks đã nhận
|
|
</x-sidebar-item>
|
|
|
|
<x-sidebar-item href="{{ route('user.sent') }}" :active="request()->routeIs('user.sent')" icon="paper-plane-outline">
|
|
Thanks đã gửi
|
|
</x-sidebar-item>
|
|
|
|
<x-sidebar-item href="{{ route('user.ranking') }}" :active="request()->routeIs('user.ranking')" icon="trophy">
|
|
Bảng xếp hạng
|
|
</x-sidebar-item>
|
|
|
|
|
|
@if(Auth::check() && Auth::user()->role == \App\Models\User::ROLE_ADMIN)
|
|
<x-sidebar-item href="{{ route('admin.users.index') }}" :active="request()->routeIs('admin.users.index')" icon="users">
|
|
Quản lý User
|
|
</x-sidebar-item>
|
|
@endif
|
|
|
|
<x-sidebar-item href="{{ route('user.change_password') }}" :active="request()->routeIs('user.change_password')" icon="gear">
|
|
Cài đặt
|
|
</x-sidebar-item>
|
|
</nav>
|
|
|
|
<!-- Illustration Box -->
|
|
<div class="hidden xl:flex justify-center items-center px-6 py-2 mt-auto">
|
|
<img src="{{ asset('images/sidebar_illustration.png') }}" class="w-full max-w-[200px] h-auto object-contain mix-blend-multiply" alt="Illustration" />
|
|
</div>
|
|
|
|
<!-- User Profile Section -->
|
|
<div id="sidebar-profile" class="p-5 border-t border-gray-100 flex items-center justify-between cursor-pointer hover:bg-gray-50 transition-colors shrink-0">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-10 h-10 rounded-full overflow-hidden shrink-0 border border-gray-200">
|
|
@php
|
|
$avatarUrl = Auth::check() && Auth::user()->avatar
|
|
? Auth::user()->avatar
|
|
: (Auth::check() && Auth::user()->name
|
|
? 'https://api.dicebear.com/7.x/notionists/svg?seed=' . urlencode(Auth::user()->name) . '&backgroundColor=e2e8f0'
|
|
: asset('images/avatar.png'));
|
|
@endphp
|
|
<img src="{{ $avatarUrl }}" alt="Avatar" class="w-full h-full object-cover">
|
|
</div>
|
|
<div class="flex flex-col">
|
|
<span class="text-[14px] font-bold text-[#1e293b] leading-tight truncate max-w-[130px]">{{ Auth::check() ? (Auth::user()->name ?? 'Nguyễn Minh Anh') : 'Nguyễn Minh Anh' }}</span>
|
|
<span class="text-[12px] text-gray-500 font-medium">{{ Auth::check() ? (Auth::user()->role == \App\Models\User::ROLE_ADMIN ? 'Administrator' : 'Product Team') : 'Product Team' }}</span>
|
|
</div>
|
|
</div>
|
|
<svg class="w-4 h-4 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" /></svg>
|
|
</div>
|
|
<!-- Logout Modal -->
|
|
<div id="logout-modal" class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 hidden">
|
|
<div class="bg-white rounded-lg shadow-lg p-6 w-80">
|
|
<h2 class="text-lg font-semibold mb-4">Bạn có muốn đăng xuất?</h2>
|
|
<form method="POST" action="{{ route('logout') }}">
|
|
@csrf
|
|
<button type="submit" class="w-full bg-red-600 text-white py-2 rounded-md hover:bg-red-700">Logout</button>
|
|
</form>
|
|
<button id="close-logout-modal" class="mt-3 w-full text-gray-600 py-2 rounded-md hover:bg-gray-100">Cancel</button>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
document.getElementById('sidebar-profile')?.addEventListener('click', function () {
|
|
document.getElementById('logout-modal').classList.remove('hidden');
|
|
});
|
|
document.getElementById('close-logout-modal')?.addEventListener('click', function () {
|
|
document.getElementById('logout-modal').classList.add('hidden');
|
|
});
|
|
</script>
|
|
</aside>
|