<link rel="stylesheet" href="{{ asset('assets/frontend/css/app.css') }}">

<!-- Main Sidebar - Collapsible -->
<nav id="sidebar" class="col-md-2 col-lg-2 d-none d-md-block bgGradDown sidebar min-vh-100 pt-4 position-fixed">
    <div class="sidebar-sticky vh-100">
        <!-- Collapse button -->
        <div class="d-flex justify-content-end mb-3 px-3">
            <button id="sidebarCollapse" class="btn btn-transparent">
                <i id="sidebarIcon" class="fas fa-arrow-left text-white"></i>
            </button>
        </div>
        
        <ul class="nav flex-column position-relative customHeight">
            @include('layouts.partials.sidebar_navigators')
        </ul>
    </div>
</nav>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const sidebarCollapseButton = document.getElementById('sidebarCollapse');
        const sidebarIcon = document.getElementById('sidebarIcon');
        const sidebar = document.getElementById('sidebar');

        sidebarCollapseButton.addEventListener('click', function () {
            sidebar.classList.toggle('collapsed');
            if (sidebar.classList.contains('collapsed')) {
                sidebarIcon.classList.remove('fa-arrow-left');
                sidebarIcon.classList.add('fa-arrow-right');
            } else {
                sidebarIcon.classList.remove('fa-arrow-right');
                sidebarIcon.classList.add('fa-arrow-left');
            }
        });
    });
</script>