	var topnav_btn_menu = document.getElementById("topnav-btn-menu");
	var top_dropdown_btn = document.getElementsByClassName("topnav-dropdown-btn");
	var top_dropdown_content = document.getElementsByClassName("topnav-dropdown-content");
	var sidenav = document.getElementById('sidenav');
	var side_dropdown_btn = document.getElementsByClassName("sidenav-dropdown-btn");
	var side_dropdown_content = document.getElementsByClassName("sidenav-dropdown-content");	
	var i;
	
	window.onclick = function(event) {	
	  if (topnav_btn_menu.contains(event.target)){
		if (sidenav.classList.contains('show')) {
		  sidenav.classList.remove('show');
		} else {
		  sidenav.classList.add('show');
		}
	  }
	  
	  if (!event.target.matches('.topnav-dropdown-btn')) {	  // Close the dropdown if the user clicks outside of it
		for (i = 0; i < top_dropdown_btn.length; i++)
			top_dropdown_btn[i].classList.remove('active');
	  
		for (i = 0; i < top_dropdown_content.length; i++) {
		  var openDropdown = top_dropdown_content[i];
		  if (openDropdown.classList.contains('show')) {
			openDropdown.classList.remove('show');
		  }
		}
	  }else{	// Open the topnav dropdown, first close all other opened
		for (i = 0; i < top_dropdown_btn.length; i++) 
			top_dropdown_btn[i].classList.remove('active');
	  
		for (i = 0; i < top_dropdown_content.length; i++) {
		  var openDropdown = top_dropdown_content[i];
		  if (openDropdown.classList.contains('show')) {
			openDropdown.classList.remove('show');
		  }
		}
		
		event.target.classList.toggle("active");
		var dropdownContent = event.target.nextElementSibling;
		if (dropdownContent.classList.contains('show')) {
		  dropdownContent.classList.remove('show');
		}else{
		  dropdownContent.classList.add('show');  
		}
	  }
	
	  if (event.target.matches('.sidenav-dropdown-btn')) {	  // Open the sidenav dropdown
		event.target.classList.toggle("active");
		var dropdownContent = event.target.nextElementSibling;
		  if (dropdownContent.classList.contains('show')) {
			dropdownContent.classList.remove('show');
		  } else {
			dropdownContent.classList.add('show');
		  }
	  }
	  
	  if (!(sidenav.contains(event.target) || topnav_btn_menu.contains(event.target))){ // Close sidenav and all sidenav dropdown
	
		sidenav.classList.remove('show');
		for (i = 0; i < side_dropdown_btn.length; i++)
			side_dropdown_btn[i].classList.remove('active');
	
		for (i = 0; i < side_dropdown_content.length; i++) {
		  var openDropdown = side_dropdown_content[i];
		  if (openDropdown.classList.contains('show')) {
			openDropdown.classList.remove('show');
		  }
		}
	  }
	}