Как добавить определенный блок в меню бургер?

Question

[DereBkO]

Помогите пожалуйста, я делаю меню бургер и на 767px я сделал его и застилизовал меню бургер класс .menu__body, оно работает меню выдвигается, но когда экран будет 497px мне нужно в меню бургер добавить класс .square__menu, чтобы меню выдвигалось вместе с этим классом

<header class="header">
	<div class="container">
		<a href="index.html" class="header__logo"><img src="@img/icons/header/logo.svg" alt="logo"></a>
		<div class="header__menu menu">
			<nav class="menu__body">
				<ul class="menu__list">
					<li class="menu__item"><a href="#about" class="menu__link">Wave NFTs</a></li>
					<li class="menu__item"><a href="#portfolio" class="menu__link">Stories</a></li>
					<li class="menu__item"><a href="#reviews" class="menu__link">Contact</a></li>
				</ul>
			</nav>
			<div class="square__btn">
				<a href="#" class="square__link square__link_1"></a>
				<a href="#" class="square__link square__link_2"></a>
				<a href="#" class="square__link square__link_3"></a>
				<a href="#" class="square__link square__link_4"></a>
			</div>
			<div class="menu__icon">
				<span></span>
				<span></span>
				<span></span>
			</div>
		</div>
	</div>
</header>

const menuBtn = document.querySelector('.menu__icon');
const menu = document.querySelector('.menu__body');

const body = document.body;

if (menu && menuBtn) {
	menuBtn.addEventListener('click', e => {
		menu.classList.toggle('active')
		menuBtn.classList.toggle('active')
		body.classList.toggle('lock')
	})

	menu.addEventListener('click', e => {
		if (e.target.classList.contains('menu__body')) {
			menu.classList.remove('active')
			menuBtn.classList.remove('active')
			body.classList.remove('lock')
		}
	})

	menu.querySelectorAll('.menu__link').forEach(link => {
		link.addEventListener('click', () => {
			menu.classList.remove('active')
			menuBtn.classList.remove('active')
			body.classList.remove('lock')
		})
	})
}