on mobile when I open hamburger menu the X icon is not showing when I want to close the menu?

[johannes999]

this is the html code :

   <nav class="menu">
        <div class="hamburger">
			 <i class="fas fa-bars"></i>
		
                </div>
        <ul class="menu-items">
            <li><a href="#">Home</a></li>
            <li class="dropdown">
                <a href="#">Laptop Brands <i class="fa fa-caret-down"></i></a>
                <div class="mega-menu">
                    <div class="menu-row">
                        <div class="menu-column">
                            <h3>Asus</h3>
                            <ul>
                                <li><a href="#">Asus1</a></li>
                                <li><a href="#">Asus2</a></li>
                            </ul>
                        </div>
                        <div class="menu-column">
                            <h3>Acer</h3>
                            <ul>
                                <li><a href="#">Acer1</a></li>
                                <li><a href="#">Acer2</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="menu-row">
                        <div class="menu-column">
                            <h3>HP</h3>
                            <ul>
                                <li><a href="#">HP1</a></li>
                                <li><a href="#">HP2</a></li>
                            </ul>
                        </div>
                        <div class="menu-column">
                            <h3>Dell</h3>
                            <ul>
                                <li><a href="#">Dell1</a></li>
                                <li><a href="#">Dell2</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    </nav>

this is css code:

	.menu {
    background-color: grey;
    position: relative;
}

.menu-items {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
}

.menu-items > li {
    position: relative;
}

.menu-items > li > a {
    display: block;
    padding: 15px 20px;
    color: white;
    text-decoration: none;
}

.menu-items > li > a:hover,
.menu-items > li:hover > a {
    background-color: darkgrey;
}

.dropdown:hover .mega-menu {
    display: flex;
}

.fa-caret-down {
    margin-left: 5px;
}

.dropdown:hover .fa-caret-down {
    transform: rotate(180deg);
}

.mega-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: grey;
    width: 600px;
    padding: 20px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.menu-row {
    display: flex;
    width: 100%;
    justify-content: space-around;
}

.menu-column {
    flex: 1;
    padding: 0 15px;
    min-width: 150px;
    text-align: center;
}

.menu-column h3 {
    color: white;
    border-bottom: 1px solid white;
    padding-bottom: 5px;
    margin-bottom: 10px;
}

.menu-column ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.menu-column ul li a {
    color: white;
    text-decoration: none;
    display: block;
    padding: 5px 0;
    transition: background-color 0.3s;
}

.menu-column ul li a:hover {
    background-color: darkgrey;
    border-radius: 4px;
}

/* Responsive Styles */
.hamburger {
    display: none;
    cursor: pointer;
    padding: 15px 20px;
}

.hamburger i {
    font-size: 24px;
    color: #ffd978;
    transition: 0.5s;
}

@media (max-width: 600px)  {	

	
.menu-items {
        display: none;
        flex-direction: column;
        position: fixed;
        top: 0;
        right: -100%;
        height: 100%;
        width: 300px;
        background-color: grey;
        transition: right 0.3s ease;
        padding-top: 60px;
    }

    .menu-items.active {
        right: 0;
        display: flex;
    }

    .hamburger {
        display: block;
    }

    /* Mobile Dropdown */
    .dropdown .mega-menu {
        display: none;
        position: static;
        transform: none;
        width: 100%;
        box-shadow: none;
        background-color: transparent;
        padding: 0;
    }

    .dropdown.active .mega-menu {
        display: block;
    }

   

  
	
	
	}

and this is JS code:

	<script>
document.addEventListener('DOMContentLoaded', () => {
    const hamburger = document.querySelector('.hamburger');
    const menuItems = document.querySelector('.menu-items');
    const dropdown = document.querySelector('.dropdown');
    const barsIcon = '<i class="fas fa-bars"></i>';
    const timesIcon = '<i class="fas fa-times"></i>';

    // Initialize hamburger with bars icon
    hamburger.innerHTML = barsIcon;

    // Toggle hamburger menu
    hamburger.addEventListener('click', () => {
        if (menuItems.classList.contains('active')) {
            menuItems.classList.remove('active');
            hamburger.innerHTML = barsIcon;
        } else {
            menuItems.classList.add('active');
            hamburger.innerHTML = timesIcon;
        }
    });

    // Toggle dropdown on mobile
    dropdown.addEventListener('click', (event) => {
        if (window.innerWidth <= 767) {
            event.preventDefault();
            dropdown.classList.toggle('active');
            const caretIcon = dropdown.querySelector('.fa-caret-down');
            if (dropdown.classList.contains('active')) {
                caretIcon.style.transform = 'rotate(180deg)';
            } else {
                caretIcon.style.transform = 'rotate(0deg)';
            }
        }
    });
});




</script>

https://laptopdiscounthub.com/         where it can be the fault.  can someone fix for me this code!

does fas fa-times must be included in html and styled in css ? or the fault is in js code? 

thanks