<nav id="sidebar">
    <style>
        #sidebar{
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.03);
        }
        #sidebar .sidebar-header {
        padding: 0.62rem 1rem;
        max-height: 70px;
        border: none;
        text-align: center;
        }
        .side-bar-sub-tittel{
            padding: 10px 15px;
            color: #444;
            font-weight: 500;
            font-size: 14px;
        }
        .side-bar-sub-tittel span{
            text-transform: uppercase;
        }
        
        
        #sidebar ul li a, #sidebar ul li a:hover{
            background: transparent !important;
            color: #444;
            font-weight: 400 !important;
            line-height: 1.313rem;
            font-size: .875rem;
        }
        #sidebar ul li{
            color: #444;
            position: relative
        }
        #sidebar ul li::after {
            position: absolute;
            content: '';
            top: 0;
            left: 0;
            width: 5px;
            height: 100%;
            background: #302B63 !important;
            opacity: 0;
        }
        #sidebar ul li:hover, #sidebar ul li.active-navbar {
            color: #444;
            background: #302b633b;
        }
        #sidebar ul li:hover::after, #sidebar ul li.active-navbar::after{
            color: #444;
            opacity: 1 !important;
        }
        #sidebar .collapse.show ul{
            padding: 0px;
            list-style-type: none !important;
        }
        #sidebar .collapse.show ul li{
            background: transparent !important;
            display: flex;
            align-items: center;
            padding: 0.8rem 1.8rem;
        }
        #sidebar .collapse.show ul li::after{
            display: none;
        }
        #sidebar .collapse.show ul li a{
            padding: 0px
        }
        #sidebar .collapse.show ul li a:hover{
            color: #302B63;
        }
        .sub-menu-dot{
            width: 6px;
            height: 6px;
            border-radius: 50%;
            border: 1px solid #302B63;
            margin-right: 8px
        }
    </style>
    <div class="sidebar-header">
        <img src="{{ asset('logo.png')}}" alt="logo" class="app-logo" width="50px" height="50px">
    </div>
    <div class="side-bar-sub-tittel">
        <span>Dashboard</span>
    </div>
    <ul class="list-unstyled components text-secondary">
        <li class="{{ request()->routeIs('admin.dashboard') ? 'active-navbar' : '' }}">
            <a href="{{ route('admin.dashboard') }}"><i class="fas fa-home"></i> Dashboard</a>
        </li>
        <li class="{{ request()->routeIs('admin.pages.create') ? 'active-navbar' : '' }}">
            <a href="{{ route('admin.pages.create') }}"><i class="fas fa-cube"></i> CMS Management</a>
        </li>
        <li class="{{ request()->routeIs('admin.advertisements.index') ? 'active-navbar' : '' }}">
            <a href="{{ route('admin.advertisements.index') }}"><i class="fas fa-ad"></i> Advertisement</a>
        </li>

        <li class="{{ request()->routeIs('admin.users-list') ? 'active-navbar' : '' }}">
            <a href="{{ route('admin.users-list')}}"><i class="fas fa-users"></i>Users</a>
        </li>
        <li>
            <a data-bs-toggle="collapse" href="#enquiryList" role="button" aria-expanded="{{ request()->routeIs('admin.enquiry-list') || request()->routeIs('admin.contact.widget') ? 'true' : 'false' }}" aria-controls="enquiryList">
                <i class="fas fa-address-book"></i>Contact Us<i class="fas fa-chevron-down"></i>
            </a>
            
        </li>
        <div class="collapse{{ request()->routeIs('admin.enquiry-list') || request()->routeIs('admin.contact.widget') ? ' show' : '' }}" id="enquiryList">
            <ul style="list-style-type: none !important;">
                <li class="{{ request()->routeIs('admin.enquiry-list') ? 'active-navbar' : '' }}"><div class="sub-menu-dot"></div><a href="{{ route('admin.enquiry-list') }}"><i class="fas fa-envelope"></i>Manage Enquiries</a></li>
                <li class="{{ request()->routeIs('admin.contact.widget') ? 'active-navbar' : '' }}"><div class="sub-menu-dot"></div><a href="{{ route('admin.contact.widget') }}"><i class="fas fa-cogs"></i>Manage Widget</a></li>
            </ul>
        </div>
        <li>
            <a data-bs-toggle="collapse" href="#gameList" role="button" aria-expanded="{{ request()->routeIs('admin.game-details.index') || request()->routeIs('admin.game-details.index') ? 'true' : 'false' }}" aria-controls="gameList">
                <i class="fas fa-gamepad"></i>Games<i class="fas fa-chevron-down"></i>
            </a>
            
        </li>
        <div class="collapse{{ request()->routeIs('admin.game-details.index') || request()->routeIs('admin.game-details.index') ? ' show' : '' }}" id="gameList">
            <ul style="list-style-type: none !important;">
                <li class="{{ request()->routeIs('admin.game-details.create') ? 'active-navbar' : '' }}"><div class="sub-menu-dot"></div><a href="{{ route('admin.game-details.create')}}"><i class="fas fa-plus"></i>Add Game</a></li>
                <li class="{{ request()->routeIs('admin.game-details.index') ? 'active-navbar' : '' }}"><div class="sub-menu-dot"></div><a href="{{ route('admin.game-details.index') }}"><i class="fas fa-list"></i>Game Listing</a></li>
            </ul>
        </div>
        <li class="{{ request()->routeIs('admin.categories.index') ? 'active-navbar' : '' }}">
            <a href="{{ route('admin.categories.index')}}"><i class="fas fa-folder"></i>Category</a>
        </li>

        <li>
            {{-- <a href="settings.html"><i class="fas fa-cog"></i>Settings</a> --}}
        </li>
    </ul>
</nav>
