<!-- Global Loader -->
<div id="globalLoader"
    style="
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(251, 248, 248, 0.996);
        z-index: 9999;
        display: none;
        justify-content: center;
        align-items: center;
    ">
    <div>
        <img src="{{ asset('images/steering.png') }}" alt="Loading..." class="steering-loader">
    </div>
</div>

<style>
    .steering-loader {
        width: 90px;
        height: 90px;
        animation: rotateSteering 1s linear infinite;
    }

    @keyframes rotateSteering {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
</style>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        var loader = document.getElementById('globalLoader');

         document.querySelectorAll('.sidebar_loader a').forEach(function(link) {
            link.addEventListener('click', function(e) {
                var href = this.getAttribute('href');

                if (href && href.trim() !== '' && href !== '#' && !this.hasAttribute('target')) {
                    loader.style.display = 'flex';
                }
            });
        });
    });

    window.addEventListener('load', function() {
        var loader = document.getElementById('globalLoader');
        if (loader) {
            loader.style.display = 'none';
        }
    });
</script>