سلام
من یه منو ساختم از روی فیلم و دکمه بستن کار نمی کند لطفا راهنمایی کنید.

<!DOCtype html> <html> <head> <meta name="viewport" content="width=device-width, initial-scaie=1.0"> <title>curve outside in Active tab |sidebr Menu</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="navigation"> <ul> <li class="list active"> <a href="#"> <span class="icon"><ion-icon name="home-outline"></ion-icon></span> <span class="title">Home</span> </a> </li> <li class="list"> <a href="#"> <span class="icon"><ion-icon name="person-outline"></ion-icon></span> <span class="title">profile</span> </a> </li> <li class="list"> <a href="#"> <span class="icon"><ion-icon name="chatbubbles-outline"></ion-icon></span> <span class="title">Messages</span> </a> </li> <li class="list"> <a href="#"> <span class="icon"><ion-icon name="settings-outline"></ion-icon></span> <span class="title">setting</span> </a> </li> <li class="list"> <a href="#"> <span class="icon"><ion-icon name="help-outline"></ion-icon></span> <span class="title">Help</span> </a> </li> <li class="list"> <a href="#"> <span class="icon"><ion-icon name="bag-outline"></ion-icon></span> <span class="title">password</span> </a> </li> <li class="list"> <a href="#"> <span class="icon"><ion-icon name="enter-outline"></ion-icon></span> <span class="title">sign out</span> </a> </li> </ul> </div> <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script> <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script> <script> //add active class in selected list item let list = document.querySelectorAll('.list'); for(let i=0; i<list.length; i++){ list[i].onclick = function (){ let j = 0; while(j < list.length){ list[j++].className = 'list'; } list[i].className = 'list active'; } } </script> </body> </html>