Переключение панели навигации: активная проблема

В настоящее время я столкнулся с проблемой с желаемыми эффектами CSS. Проблема в том, что у меня есть переключатель навигационной панели черного цвета. Когда я нажимаю на переключатель панели навигации, я хочу, чтобы при ее расширении цвет фона панели навигации был красным, а затем, когда я нажимаю на него и убираю панель навигации, цвет снова меняется с красного на черный. Но он становится красным только после того, как я нажимаю на него, а когда я отпускаю, он снова становится черным. Сценарий, который мне предложили, приведен ниже.

Свернуть/развернуть изображение:

Полная панель навигации:

PHP Ларавел

<header class = "header header_style_01">
    <nav class = "megamenu navbar navbar-default">
        <div class = "container">
            <div class = "navbar-header">
                <button type = "button" class = "navbar-toggle collapsed" id = "toggle-button" data-toggle = "collapse" data-target = "#navbar"
                    aria-expanded = "false" aria-controls = "navbar">
                    <span class = "sr-only">Toggle navigation</span>
                    <span class = "icon-bar"></span>
                    <span class = "icon-bar"></span>
                    <span class = "icon-bar"></span>
                </button>
                <a class = "navbar-brand" href = "/"><img src = "images/logos/smsGuru_logo.png"
                        height = "60px" alt = "sms guru" title = "cheap sms"></a>
            </div>



            <div id = "navbar" class = "navbar-collapse collapse">
                <!-- <ul class = "nav navbar-nav" style = "margin-top: 8px;margin-left: 550px;"> -->
                <!-- <li><a class = "active" href = "index.html">Home</a></li> -->
                <!--     <li><a href = "features.html">Features </a></li>
                    <li><a href = "domain.html">Domain</a></li>
                    <li><a href = "hosting.html">Hosting</a></li>
                    <li><a href = "pricing.html">Pricing</a></li>
                    <li><a href = "testimonials.html">Testimonials</a></li>
                    <li><a href = "contact.html">Contact</a></li> -->

                <!--  <li><h1 class = "contact_me"><b><a href = "http://360.my/w/60123240066">+6012 324 0066</a></b></h1></li> -->
                <!-- <li><h1 class = "contact_me"><b><a href = "http://360.my/w/60123240066">+6012 324 0066</a></b></h1></li> -->

                <!-- </ul> -->
                <ul class = "nav navbar-nav navbar-right">
                    <li>
                        <h1 class = "contact_me"><b><a
                                    href = "https://wa.me/60123240066?text=I+would+like+to+inquire+about"
                                    target = "_blank">+6012 3240 066</a></b></h1>
                    </li>
                    <!-- <li><a class = "btn-light btn-radius btn-brd log" href = "#" data-toggle = "modal" data-target = "#login"><i class = "fa fa-unlock"></i> Register</a></li> -->
                    <li><a class = "btn-light btn-radius btn-brd log" href = "https://sms.360.my/developers/v3.0"><i
                                class = "fa fa-file"></i> API</a></li>
                    <li><a class = "btn-light btn-radius btn-brd log" href = "https://sms.360.my/register"><i
                                class = "fa fa-unlock"></i> Register</a></li>
                    <!-- <li><a class = "btn-light btn-radius btn-brd log" href = "#" data-toggle = "modal" data-target = "#login"><i class = "fa fa-lock"></i> Login</a></li> -->
                    <li><a class = "btn-light btn-radius btn-brd log" href = "https://sms.360.my/login"><i
                                class = "fa fa-lock"></i>
                            Login</a></li>
                </ul>
            </div>
        </div>
    </nav>
</header>

файл custom.css ниже

 .header_style_01 {
    background-color: #2d3032;
    display: block;
    left: 0;
    padding: 15px 20px 5px !important;
    position: relative;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 111;
}

.navbar-default .navbar-toggle {
    border-color: #2d3032;
    color: #fff !important;
    background-color: #2d3032 !important;
}
.navbar-default .navbar-toggle:active{
    background-color: #DD0000 !important;
    border-color: #DD0000;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
    border-color: transparent;
}

Скрипт в index.blade.php

<script>
document.addEventListener('DOMContentLoaded', function() {
    var button = document.getElementById('toggle-button');
    var navbarCollapse = document.getElementById('navbar');

    // Toggle 'active' class when the button is clicked
    button.addEventListener('click', function() {
        // Use a timeout to wait for the collapse animation to complete
        setTimeout(function() {
            if (navbarCollapse.classList.contains('in') || navbarCollapse.classList.contains('show')) {
                button.classList.add('active');
            } else {
                button.classList.remove('active');
            }
        }, 350); // Adjust delay to match the Bootstrap collapse animation duration
    });

    // Add 'active' class when the navbar is shown
    navbarCollapse.addEventListener('shown.bs.collapse', function() {
        button.classList.add('active');
    });

    // Remove 'active' class when the navbar is hidden
    navbarCollapse.addEventListener('hidden.bs.collapse', function() {
        button.classList.remove('active');
    });
});
</script>.

Я поместил этот код в index.blade.php так же, как и код. Но это все равно не сработает.

Сначала я использовал переключатель навигации: наведите курсор. Но в результате, когда я нажимаю на него, он остается красным. Но если я снова нажму на переключатель, он останется красным, и он останется красным, пока я не нажму на область за пределами панели навигации.