@endif

 {{-- Client Sidebar --}}
 @if ($role === 'client')
     <li class="nav-item {{ request()->routeIs('client.dashboard') ? 'active' : '' }}">
         <a href="{{ route('client.dashboard') }}"><i data-feather="home"></i><span class="menu-title">Dashboard</span></a>
     </li>
     <li class="nav-item"><a href="#"><i data-feather="user-check"></i><span class="menu-title">Agent</span></a></li>
     <li class="nav-item"><a href="#"><i data-feather="file"></i><span class="menu-title">File</span></a></li>
     <li class="nav-item"><a href="#"><i data-feather="calendar"></i><span
                 class="menu-title">Appointments</span></a></li>
 @endif

 {{-- Admin Sidebar --}}
 @if ($role === 'admin')
     <li class="nav-item {{ request()->routeIs('admin.dashboard') ? 'active' : '' }}">
         <a href="{{ route('admin.dashboard') }}"><i data-feather="home"></i><span
                 class="menu-title">Dashboard</span></a>
     </li>

     <li class="navigation-header"><span>Admin Tools</span><i data-feather="more-horizontal"></i></li>

     {{-- Getting Started --}}
     <li class="nav-item {{ request()->routeIs('admin.getting.started') ? 'active' : '' }}">
         <a href="{{ route('admin.getting.started') }}"><i data-feather="book-open"></i><span class="menu-title">Getting
                 Started</span></a>
     </li>

     {{-- Support Page --}}
     <li class="nav-item {{ request()->routeIs('admin.support-contact.edit') ? 'active' : '' }}">
         <a href="{{ route('admin.support-contact.edit') }}"><i data-feather="phone-call"></i><span
                 class="menu-title">Edit Contact Page</span></a>
     </li>

     {{-- Useful Links --}}
     @if (Route::has('admin.useful-links.index'))
         <li class="nav-item {{ request()->routeIs('admin.useful-links.*') ? 'active' : '' }}">
             <a href="{{ route('admin.useful-links.index') }}"><i data-feather="link"></i><span
                     class="menu-title">Manage Useful Links</span></a>
         </li>
     @endif

     {{-- App Settings Dropdown --}}
     <li
         class="nav-item nav-dropdown {{ request()->routeIs('admin.app-settings') || request()->routeIs('admin.colors') || request()->routeIs('admin.logo') ? 'open' : '' }}">
         <a href="#"><i data-feather="sliders"></i><span class="menu-title">Theme & Settings</span></a>
         <ul class="menu-content">
             <li class="{{ request()->routeIs('admin.logo') ? 'active' : '' }}">
                 <a href="{{ route('admin.logo') }}"><span class="menu-item">Logo</span></a>
             </li>
             <li class="{{ request()->routeIs('admin.colors') ? 'active' : '' }}">
                 <a href="{{ route('admin.colors') }}"><span class="menu-item">Theme Colors</span></a>
             </li>
             <li class="{{ request()->routeIs('admin.app-settings') ? 'active' : '' }}">
                 <a href="{{ route('admin.app-settings') }}"><span class="menu-item">App Settings</span></a>
             </li>
         </ul>
     </li>
 @endif

 {{-- Shared Logout --}}
 @auth
     <li class="nav-item">
         <a href="#" onclick="event.preventDefault(); document.getElementById('logout-form').submit();">
             <i data-feather="log-out"></i><span class="menu-title">Logout</span>
         </a>
         <form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">@csrf</form>
     </li>
 @endauth

 </ul>
 </div>
 </div>
 <!-- END: Main Menu -->

 <!-- Feather & Mobile Toggle -->
 <script>
     document.addEventListener("DOMContentLoaded", function() {
         feather.replace();
         const toggleBtn = document.getElementById("mobile-menu-toggle");
         const sidebar = document.querySelector(".main-menu");
         toggleBtn?.addEventListener("click", () => sidebar?.classList.toggle("open"));
     });
 </script>

 <style>
     @media (max-width: 1199.98px) {
         .main-menu {
             transform: translateX(-100%);
             transition: transform 0.3s ease-in-out;
             position: fixed;
             top: 0;
             bottom: 0;
             left: 0;
             width: 260px;
             background: white;
             z-index: 2000;
         }

         .main-menu.open {
             transform: translateX(0);
         }

         body.sidebar-open {
             overflow: hidden;
         }
     }
 </style>