Untitled

const navBtn = document.querySelector('.nav-btn');
const navMobile = document.querySelector('.nav__mobile');

const showNav = () => {
	navMobile.classList.toggle('nav__mobile--active');
};

navBtn.addEventListener('click', showNav);

// =======================================================================

// class Index {
// 	#config;

// 	#navbar;

// 	constructor(config) {
// 		this.#config = config;

// 		this.#initView();
// 	}

// 	#initView() {
// 		const { reference, toggleSelector } = this.#config.navbar;

// 		this.#navbar = new Navbar(reference, toggleSelector);
// 	}
// }

// class Navbar {
// 	#navbar;
// 	#triggerSelector;

// 	/**
// 	 * @Params {HTMLElement} navbar
// 	 * @Params {string} triggerSelector
// 	 */
// 	constructor(navbar, triggerSelector) {
// 		this.#navbar = navbar;
// 		this.#triggerSelector = triggerSelector;

// 		this.#initListeners();
// 	}

// 	#initListeners() {
// 		this.#navbar.addEventListener('click', this.#toggleButtonHandler.bind(this));
// 	}

// 	#toggleButtonHandler(event) {
// 		const element = event.target.closest('button');

// 		if (!element?.classList.contains(this.#triggerSelector)) return;

// 		this.#toggleMenu();
// 	}

// 	#toggleMenu() {
// 		const navMobile = this.#navbar.querySelector('.nav__mobile');

// 		navMobile.classList.toggle('items-animation');
// 	}
// }

// // ======================================

// const config = {
// 	navbar: {
// 		reference: document.querySelector('.navbar'),
// 		toggleSelector: '.nav-btn .nav-bars',
// 	},
// };

// new Index(config);