I am struggling with displaying a menu and its mobile version in HTML. The mobile menu doesn't seem to be functioning properly. Is there a way to initially show only the menu SVG icon, hide the mobile menu, and then reveal the mobile menu along with the close SVG icon upon clicking the open menu button?
Currently, on the mobile version, the menu appears open by default with a button to close it, but the button does not hide the menu as intended.
You can check out an example here:
https://jsfiddle.net/2vjo0gnc/
HTML
<div class="relative bg-gray-50 overflow-hidden">
<div class="max-w-7xl mx-auto">
... (omitted for brevity) ...
</html>
JS
const nav = document.querySelector('#mobile-nav');
const closeBtn = document.getElementById('close-mobile-nav-btn');
closeBtn.addEventListener('click', () => {
console.log('Show/hide the menu');
});