since the dark overlay that covers the main page content when displaying the menu is an ::after element, that only appears when the menu has the .active class. When removing the class through javascript there is no possibility of animation. Therefore I had to create two new classes to animate the object before the .active class is removed, and to do so, I had to set timers both, when showing the menu and when closing the menu, to allow for the transitions before the .active class is removed.
since the dark overlay that covers the main page content when displaying the menu is an ::after element, that only appears when the menu has the .active class. When removing the class through javascript there is no possibility of animation. Therefore I had to create two new classes to animate the object before the .active class is removed, and to do so, I had to set timers both, when showing the menu and when closing the menu, to allow for the transitions before the .active class is removed.