Currently, I am in the process of learning how to utilize Angular 12 and am attempting to create a sidenav. While I am aware that I can use angular material for this task, I would prefer not to incorporate the associated CSS.
My goal is to integrate this particular feature into my project. However, I am struggling to comprehend how to convert the provided JS code to be compatible with an Angular 12 project.
I have stored the JavaScript code in a file named menu.js within my assets/js folder. Nonetheless, I am uncertain about how it should be integrated with the component.js file since it does not consist of an actual function but rather a document.queryselectorall.
let arrow = document.querySelectorAll(".arrow");
for (var i = 0; i < arrow.length; i++) {
arrow[i].addEventListener("click", (e)=>{
let arrowParent = e.target.parentElement.parentElement; //selecting main parent of arrow
arrowParent.classList.toggle("showMenu");
});
}
let sidebar = document.querySelector(".sidebar");
let sidebarBtn = document.querySelector(".bx-menu");
console.log(sidebarBtn);
sidebarBtn.addEventListener("click", ()=>{
sidebar.classList.toggle("close");
});