ProjectKP/KP-ASOY FIX (2)/KP-ASOY/resources/views/user/layouts/navbar.blade.php

<nav class="bg-[#f8fafc] border-b border-slate-200 font-['Outfit'] sticky top-0 z-50 shadow-sm">
    <div class="max-w-[1200px] mx-auto px-4 md:px-6 lg:px-10">
        <div class="flex items-center justify-between h-[70px]">
            <!-- LEFT: LOGO -->
            <div class="flex items-center gap-2 md:gap-3">
                <img src="{{ asset('Kalimantan-Barat-Logo-Vector.png') }}" class="h-9 md:h-[42px] w-auto object-contain" alt="Logo Kalbar">
                <div class="leading-[1.2] border-l-2 border-slate-200 pl-2 md:pl-3">
                    <div class="font-bold text-[11px] md:text-[14px] text-blue-900 tracking-[0.02em]">
                        DINAS TENAGA KERJA DAN TRANSMIGRASI
                    </div>
                    <div class="text-[8px] md:text-[11px] text-slate-500 font-medium">
                        PROVINSI KALIMANTAN BARAT
                    </div>
                </div>
            </div>

            <!-- Hamburger Button (Mobile) -->
            <div class="flex md:hidden">
                <button type="button" id="user-menu-btn" class="text-slate-500 hover:text-blue-900 focus:outline-none p-2 rounded-md hover:bg-slate-200 transition-colors">
                    <i data-lucide="menu" class="w-6 h-6"></i>
                </button>
            </div>

            <!-- CENTER & RIGHT: NAVIGATION (Desktop) -->
            <div class="hidden md:flex items-center gap-6">
                <div class="flex items-center gap-2 text-[14px]">
                    <a href="{{ route('user.dashboard') }}"
                       class="flex items-center gap-1.5 px-4 py-2 rounded-lg transition-all duration-200 {{ request()->routeIs('user.dashboard') ? 'text-blue-800 bg-indigo-50 font-semibold' : 'text-slate-500 font-medium hover:bg-slate-100 hover:text-blue-800' }}">
                        <i data-lucide="layout-dashboard" class="w-4 h-4"></i> Dashboard
                    </a>
                    <a href="{{ route('input.activity') }}"
                       class="flex items-center gap-1.5 px-4 py-2 rounded-lg transition-all duration-200 {{ request()->routeIs('input.activity') ? 'text-blue-800 bg-indigo-50 font-semibold' : 'text-slate-500 font-medium hover:bg-slate-100 hover:text-blue-800' }}">
                        <i data-lucide="edit" class="w-4 h-4"></i> Input Kegiatan
                    </a>
                    <a href="{{ route('activity.list') }}"
                       class="flex items-center gap-1.5 px-4 py-2 rounded-lg transition-all duration-200 {{ request()->routeIs('activity.list') ? 'text-blue-800 bg-indigo-50 font-semibold' : 'text-slate-500 font-medium hover:bg-slate-100 hover:text-blue-800' }}">
                        <i data-lucide="folder" class="w-4 h-4"></i> Kegiatan Saya
                    </a>
                    <a href="{{ route('settings') ?? '#' }}"
                       class="flex items-center gap-1.5 px-4 py-2 rounded-lg transition-all duration-200 {{ request()->routeIs('settings') ? 'text-blue-800 bg-indigo-50 font-semibold' : 'text-slate-500 font-medium hover:bg-slate-100 hover:text-blue-800' }}">
                        <i data-lucide="settings" class="w-4 h-4"></i> Pengaturan
                    </a>
                </div>

                <div class="w-px h-8 bg-slate-300"></div>

                <div class="flex items-center gap-2.5">
                    <div class="w-[38px] h-[38px] rounded-full bg-blue-900 text-white flex items-center justify-center font-bold text-[16px]">
                        {{ strtoupper(substr(session('user')['name'] ?? 'U', 0, 1)) }}
                    </div>
                    <div class="leading-[1.2]">
                        <div class="font-semibold text-[14px] text-slate-900">
                            {{ session('user')['name'] ?? 'User' }}
                        </div>
                        <div class="text-[11px] text-slate-500 font-medium">
                            USER
                        </div>
                    </div>
                    
                    <form method="POST" action="{{ route('logout') }}" class="ml-2 m-0">
                        @csrf
                        <button type="submit" class="bg-transparent border-none cursor-pointer text-red-500 p-1.5 rounded-md hover:bg-red-50 transition-colors" title="Logout">
                            <i data-lucide="log-out" class="w-[18px] h-[18px]"></i>
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Mobile Menu Panel -->
    <div id="user-mobile-menu" class="hidden md:hidden bg-[#f8fafc] border-t border-slate-200 shadow-xl absolute w-full left-0 pb-4">
        <div class="px-4 py-3 flex flex-col gap-2">
            <a href="{{ route('user.dashboard') }}"
               class="flex items-center gap-3 px-4 py-3 rounded-lg transition-all duration-200 {{ request()->routeIs('user.dashboard') ? 'text-blue-800 bg-indigo-50 font-semibold' : 'text-slate-600 font-medium hover:bg-slate-200' }}">
                <i data-lucide="layout-dashboard" class="w-4 h-4"></i> Dashboard
            </a>
            <a href="{{ route('input.activity') }}"
               class="flex items-center gap-3 px-4 py-3 rounded-lg transition-all duration-200 {{ request()->routeIs('input.activity') ? 'text-blue-800 bg-indigo-50 font-semibold' : 'text-slate-600 font-medium hover:bg-slate-200' }}">
                <i data-lucide="edit" class="w-4 h-4"></i> Input Kegiatan
            </a>
            <a href="{{ route('activity.list') }}"
               class="flex items-center gap-3 px-4 py-3 rounded-lg transition-all duration-200 {{ request()->routeIs('activity.list') ? 'text-blue-800 bg-indigo-50 font-semibold' : 'text-slate-600 font-medium hover:bg-slate-200' }}">
                <i data-lucide="folder" class="w-4 h-4"></i> Kegiatan Saya
            </a>
            <a href="{{ route('settings') ?? '#' }}"
               class="flex items-center gap-3 px-4 py-3 rounded-lg transition-all duration-200 {{ request()->routeIs('settings') ? 'text-blue-800 bg-indigo-50 font-semibold' : 'text-slate-600 font-medium hover:bg-slate-200' }}">
                <i data-lucide="settings" class="w-4 h-4"></i> Pengaturan
            </a>
            
            <div class="h-px w-full bg-slate-200 my-2"></div>
            
            <div class="flex items-center justify-between px-2">
                <div class="flex items-center gap-3">
                    <div class="w-[38px] h-[38px] rounded-full bg-blue-900 text-white flex items-center justify-center font-bold text-[16px]">
                        {{ strtoupper(substr(session('user')['name'] ?? 'U', 0, 1)) }}
                    </div>
                    <div class="leading-[1.2]">
                        <div class="font-semibold text-[14px] text-slate-900">
                            {{ session('user')['name'] ?? 'User' }}
                        </div>
                        <div class="text-[11px] text-slate-500 font-medium">
                            USER
                        </div>
                    </div>
                </div>
                
                <form method="POST" action="{{ route('logout') }}" class="m-0">
                    @csrf
                    <button type="submit" class="bg-transparent border-none cursor-pointer text-red-500 p-2 rounded-md hover:bg-red-50 transition-colors flex items-center gap-2" title="Logout">
                        <i data-lucide="log-out" class="w-5 h-5"></i>
                    </button>
                </form>
            </div>
        </div>
    </div>
</nav>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const btn = document.getElementById('user-menu-btn');
        const menu = document.getElementById('user-mobile-menu');
        if(btn && menu) {
            btn.addEventListener('click', function(e) {
                e.stopPropagation();
                menu.classList.toggle('hidden');
                lucide.createIcons();
            });
            document.addEventListener('click', function(e) {
                if(!menu.contains(e.target) && !btn.contains(e.target)) {
                    menu.classList.add('hidden');
                }
            });
        }
    });
</script>