const toggleBtn = document.querySelector('.menu_toggle');
const menu = document.querySelector('.menu_bar_content');
const icons = document.querySelector('.menu_bar_icons');
const content1 = document.querySelector('.overall_usage');
const content2 = document.querySelector('.basic_func');
const content3 = document.querySelector('.variables');
const content4 = document.querySelector('.for');
const content5 = document.querySelector('.if');
const content6 = document.querySelector('.def');
const content7 = document.querySelector('.parameter');
const content8 = document.querySelector('.bool');


toggleBtn.addEventListener('click', () => {
    menu.classList.toggle('active');
    icons.classList.toggle('active');
})

menu.addEventListener('click', () =>{
    content1.classList.toggle('active');
})
menu.addEventListener('click', () =>{
    content2.classList.toggle('active');
})
menu.addEventListener('click', () =>{
    content3.classList.toggle('active');
})
menu.addEventListener('click', () =>{
    content4.classList.toggle('active');
})
menu.addEventListener('click', () =>{
    content5.classList.toggle('active');
})
menu.addEventListener('click', () =>{
    content6.classList.toggle('active');
})
menu.addEventListener('click', () =>{
    content7.classList.toggle('active');
})
menu.addEventListener('click', () =>{
    content8.classList.toggle('active');
})