FileXXXXXXXXXXX

File manager - Edit - /var/www/ratemypay_dev/resources/views/components/header.blade.php

Back
{{-- resources/views/components/header.blade.php --}} <header class="w-full bg-white/80 backdrop-blur-md border-b border-gray-100 fixed top-0 z-50 h-[80px] flex items-center transition-all duration-300"> <div class="w-full max-w-[1300px] mx-auto px-6 md:px-0 flex items-center justify-between"> {{-- Logo --}} <a href="{{ url('/') }}" class="flex items-center"> <img src="{{ asset('logo.png') }}" alt="{{ config('app.name', 'Laravel') }}" class="h-6 w-auto"> </a> {{-- Desktop Nav --}} {{-- <nav class="hidden md:flex items-center gap-1"> <a href="{{ url('/') }}" class="px-4 py-2 rounded-full text-sm font-medium transition-all duration-200 {{ request()->is('/') ? 'bg-[#EEF1F7] text-[#2F3D7E]' : 'text-gray-500 hover:text-[#2F3D7E] hover:bg-gray-50' }}"> Individual </a> <a href="{{ route('communities.index') }}" class="px-4 py-2 rounded-full text-sm font-medium transition-all duration-200 {{ request()->is('community') ? 'bg-[#EEF1F7] text-[#2F3D7E]' : 'text-gray-500 hover:text-[#2F3D7E] hover:bg-gray-50' }}"> Community </a> <a href="#" class="px-4 py-2 rounded-full text-sm font-medium transition-all duration-200 {{ request()->is('resources') ? 'bg-[#EEF1F7] text-[#2F3D7E]' : 'text-gray-500 hover:text-[#2F3D7E] hover:bg-gray-50' }}"> Resources </a> </nav> --}} {{-- Auth Buttons & CTA --}} <div class="hidden md:flex items-center gap-3"> <p style="display: none;">Auth check:{{ session('db_connection') }} {{ auth()->check() ? 'Yes' : 'No' }}</p> @auth <div class="relative"> <button type="button" id="user-menu-button" class="flex items-center gap-2 px-4 py-2 rounded-full hover:bg-gray-50 transition-all duration-200"> <img src="https://ui-avatars.com/api/?name={{ urlencode(auth()->user()->name) }}&background=2F3D7E&color=fff" alt="User" class="w-8 h-8 rounded-full"> <span class="text-sm font-medium text-gray-700">{{ auth()->user()->name }}</span> <svg class="w-4 h-4 text-gray-500" 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> {{-- Dropdown Menu --}} <div id="user-menu-dropdown" class="hidden absolute right-0 mt-2 w-48 bg-white shadow-lg rounded-xl py-2 border border-gray-100" style="z-index: 9999;"> <a href="{{ route('dashboard.index') }}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 transition">Dashboard</a> <a href="{{ route('see-salary') }}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 transition">See Salaries</a> <a href="{{ route('logout') }}" onclick="event.preventDefault(); document.getElementById('logout-form').submit();" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 transition">Logout</a> <form id="logout-form" action="{{ route('logout') }}" method="POST" class="hidden"> @csrf </form> </div> </div> @else <a href="{{ route('login') }}" class="h-10 px-4 text-sm font-medium text-gray-600 hover:text-[#2F3D7E] flex items-center rounded-full hover:bg-gray-50 transition-all"> Log in </a> <div class="h-6 w-px bg-gray-200 mx-1"></div> <a href="{{ route('register') }}" class="h-10 px-5 text-sm font-medium bg-white border border-gray-200 hover:border-[#2F3D7E]/30 hover:bg-gray-50 rounded-xl flex items-center shadow-sm transition-all"> Sign Up </a> <a href="{{ route('see-salary') }}" class="h-10 px-5 text-sm font-medium bg-[#2F3D7E] hover:bg-[#1E2858] text-white hover:text-white rounded-xl flex items-center gap-2 shadow-lg shadow-blue-900/10 transition-all group"> See Salaries <svg class="w-4 h-4 group-hover:translate-x-0.5 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /> </svg> </a> @endauth </div> {{-- Mobile Menu Button --}} <button type="button" id="mobile-menu-button" class="md:hidden p-2 text-gray-600 hover:bg-gray-100 rounded-lg 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 Menu --}} <nav id="mobile-menu" class="hidden absolute top-[80px] left-0 w-full bg-white border-b border-gray-100 p-6 flex-col gap-4 md:hidden shadow-xl animate-in slide-in-from-top-5 duration-200"> <a href="{{ url('/') }}" class="text-lg font-medium text-gray-700 py-2 border-b border-gray-50">Individual</a> <a href="#" class="text-lg font-medium text-gray-700 py-2 border-b border-gray-50">Community</a> <a href="#" class="text-lg font-medium text-gray-700 py-2 border-b border-gray-50">Resources</a> <div class="flex flex-col gap-3 mt-4"> @auth <a href="{{ route('dashboard.index') }}" class="w-full py-3 text-center border border-gray-200 rounded-lg text-sm font-medium hover:bg-gray-50 transition">Dashboard</a> <a href="{{ route('logout') }}" onclick="event.preventDefault(); document.getElementById('logout-form-mobile').submit();" class="w-full py-3 text-center bg-[#2F3D7E] text-white rounded-lg text-sm font-medium hover:bg-[#1E2858] transition">Logout</a> <form id="logout-form-mobile" action="{{ route('logout') }}" method="POST" class="hidden"> @csrf </form> @else <a href="{{ route('login') }}" class="w-full py-3 text-center border border-gray-200 rounded-lg text-sm font-medium hover:bg-gray-50 transition">Log in</a> <a href="{{ route('register') }}" class="w-full py-3 text-center border border-gray-200 rounded-lg text-sm font-medium hover:bg-gray-50 transition">Sign Up</a> <a href="{{ route('see-salary') }}" class="w-full py-3 text-center bg-[#2F3D7E] text-white rounded-lg text-sm font-medium hover:bg-[#1E2858] transition">See Salaries</a> @endauth </div> </nav> </header> @auth <script> // User menu dropdown toggle const userMenuButton = document.getElementById('user-menu-button'); const userMenuDropdown = document.getElementById('user-menu-dropdown'); if (userMenuButton && userMenuDropdown) { userMenuButton.addEventListener('click', function(e) { e.preventDefault(); e.stopPropagation(); console.log('Button clicked'); // Debug log userMenuDropdown.classList.toggle('block'); }); // Close dropdown when clicking outside document.addEventListener('click', function(event) { if (!userMenuButton.contains(event.target) && !userMenuDropdown.contains(event.target)) { userMenuDropdown.classList.add('hidden'); } }); } </script> @endauth <script> // Mobile menu toggle const mobileMenuButton = document.getElementById('mobile-menu-button'); const mobileMenu = document.getElementById('mobile-menu'); if (mobileMenuButton && mobileMenu) { mobileMenuButton.addEventListener('click', function() { // mobileMenu.classList.toggle('hidden'); mobileMenu.classList.toggle('flex'); }); } </script>

| ver. 1.4 | Github | . | PHP 8.3.30 | Generation time: 0 | proxy | phpinfo | Settings