   <!-- Topbar Start -->
   <div class="navbar-custom">
       <ul class="list-unstyled topnav-menu float-right mb-0">

           <notifications v-bind:notifications="notifications"></notifications>

           <li class="dropdown notification-list">
               <a class="nav-link dropdown-toggle nav-user mr-0 waves-effect waves-light" data-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false">
                   <span class="pro-user-name ml-1">
                   {{ Auth::user()->name }} <i class="mdi mdi-chevron-down"></i>
                   </span>
                   <img src="{{ auth()->user()->getFirstMediaUrl('avatar') ? url(auth()->user()->getFirstMediaUrl('avatar')) : asset('assets/images/default-avatar.png') }}" alt="user-image" class="rounded-circle">
               </a>
               <div class="dropdown-menu dropdown-menu-right profile-dropdown ">
                   <!-- item-->
                   <div class="dropdown-header noti-title">
                       <h6 class="text-overflow m-0">خوش آمدید!</h6>
                   </div>

                   <!-- item-->
                   <a href="{{ route('panel.profile') }}" class="dropdown-item notify-item">
                       <i class="remixicon-account-circle-line"></i>
                       <span>حساب کاربری</span>
                   </a>

                   <!-- item-->
                   <a href="{{ route('panel.password.change') }}" class="dropdown-item notify-item">
                       <i class="remixicon-settings-3-line"></i>
                       <span>تغییر کلمه عبور</span>
                   </a>

                   <!-- item-->
                   <a href="javascript:void(0);" class="dropdown-item notify-item disabled">
                       <i class="remixicon-lock-line"></i>
                       <span>قفل صفحه</span>
                       <span class="badge badge-light-pink">به زودی</span>
                   </a>

                   <div class="dropdown-divider"></div>

                   <!-- item-->
                   <a href="{{ route('panel.logout') }}" class="dropdown-item notify-item">
                       <i class="remixicon-logout-box-line"></i>
                       <span>خروج</span>
                   </a>

               </div>
           </li>

       </ul>

       <!-- LOGO -->
       <div class="logo-box">
           <a href="{{ route('main') }}" class="logo text-center">
               <span class="logo-lg">
                   @if(config('site_logo'))
                       <span class="logo-lg-text-light">{{ config('site_logo') }}</span>
                   @else
                       <img src="{{ config('site_logo_img') ?: asset('assets/images/patronic-logo-light.png') }}"  alt="SITE LOGO" height="40">
                   @endif
               </span>
               <span class="logo-sm">
                   <!-- <span class="logo-sm-text-dark">X</span> -->
                   <img src="{{ asset('assets/images/patronic-logo-sm-light.png') }}" alt="P" height="24">
               </span>
           </a>
       </div>

       <ul class="list-unstyled topnav-menu topnav-menu-left m-0">
           <li>
               <button class="button-menu-mobile waves-effect waves-light">
                   <i class="fe-menu"></i>
               </button>
           </li>

            @can('quick-access')
            <li class="dropdown d-none d-lg-block">
               <a class="nav-link dropdown-toggle waves-effect waves-light" data-toggle="dropdown" href="#" role="button" aria-haspopup="false" aria-expanded="false">
                   <i class="mdi mdi-chevron-down" style="vertical-align:sub;"></i>
                   دسترسی سریع
               </a>
               <div class="dropdown-menu">

                   <!-- item-->
                   <a href="javascript:void(0);" class="dropdown-item" data-target="#addTicketModal" data-toggle="modal">
                       <i class="fe-message-square mr-1"></i>
                       <span>تیکت جدید</span>
                   </a>

                   <!-- item-->
                   <a href="javascript:void(0);" class="dropdown-item" data-target="#addDepartmentModal" data-toggle="modal">
                       <i class="fe-folder-plus mr-1"></i>
                       <span>دپارتمان جدید</span>
                   </a>

                   <!-- item-->
                   <a href="javascript:void(0);" class="dropdown-item" data-target="#addStaffModal" data-toggle="modal">
                       <i class="fe-users  mr-1"></i>
                       <span>پشتیبان جدید</span>
                   </a>

                   <!-- item-->
                   <a href="javascript:void(0);" class="dropdown-item" data-toggle="modal" data-target="#addUserModal">
                       <i class="fe-user-plus mr-1"></i>
                       <span>کاربر جدید</span>
                   </a>

                   <div class="dropdown-divider"></div>

                   <!-- item-->
                   <a href="javascript:void(0);" class="dropdown-item">
                       <i class="fe-headphones mr-1"></i>
                       <span>پشتیبانی</span>
                   </a>

               </div>
            </li>
            @endcan
       </ul>
   </div>
   <!-- end Topbar -->
