/* Sidebar styles (hidden by default) */ .sidebar { width: 200px; height: 100vh; background-color: white; position: fixed; top: 0; right: -200px; /* Position on the right side */ transition: right 0.3s ease; padding-top: 50px; /* Adjusted for space for the close icon */ } /* Close icon styles */ .sidebar .close-btn { position: absolute; top: 20px; left: 180px; /* Position the close icon inside the sidebar */ font-size: 30px; cursor: pointer; color: black; } /* Sidebar list styles */ .sidebar ul { list-style: none; padding: 0; } .sidebar ul li { text-align: left; } .sidebar ul li a { color: black; padding: 10px 15px; text-decoration: none; display: block; } .sidebar ul li a:hover { background-color: #AF8E51; color:white; } /* Open sidebar (when clicked on menuOpen) */ .sidebar.open { right: 0; /* Move it to the right side when open */ } /* Button icon styles */ .bt_bb_icon_holder { font-size: 30px; } // JavaScript to toggle the sidebar menu document.getElementById('menuOpen').addEventListener('click', function(e) { e.preventDefault(); var sidebar = document.getElementById('sidebarMenu'); sidebar.classList.toggle('open'); }); // Close the sidebar if the user clicks outside of it document.addEventListener('click', function(e) { var sidebar = document.getElementById('sidebarMenu'); var menuOpen = document.getElementById('menuOpen'); if (!sidebar.contains(e.target) && !menuOpen.contains(e.target)) { sidebar.classList.remove('open'); } }); // Close sidebar when clicking on the close button document.getElementById('closeSidebar').addEventListener('click', function(e) { e.preventDefault(); var sidebar = document.getElementById('sidebarMenu'); sidebar.classList.remove('open'); });