Приветствую. Может ли кто-нибудь проверить этот JavaScript-код? Его написал ИИ

"perplexity.ai" -

export const adaptiveHeader = () => {
  const headers = document.querySelectorAll('.header');
  const menus = document.querySelectorAll('.header__menu');
 
  function checkDistance() {
    const windowWidth = window.innerWidth;
 
    menus.forEach(menu => {
      const rect = menu.getBoundingClientRect();
      if (windowWidth - rect.right === 12) {
        headers.forEach(header => {
          header.classList.add('header--mobile');
        });
      }
    });
  }
 
  window.addEventListener('resize', checkDistance);
};

Странная какая-то логика у этого кода.

Поможешь пожалуйста это исправить?

Сейчас не за компьютером. Опять же никто пока не знает какой результат тебе нужен.

А ты угадай😅

Нужно, чтобы к ".header" добавился класс ".header--mobile" когда расстояние у ".header__menu" остаётся 12 пикселей до правого края и убрался этот класс когда оно больше чем 12 пикселей

Тогда, в принципе, должно работать. Только вот зачем такое странное условие?

Не хочу через media-запросы это делать, так как ширина меню может быть изменена в любой момент

И это писал ИИ, а я JavaScript не знаю

И что?

Как изменится, так и сработает.

Тогда, наверное, стоит хотя бы ознакомиться с ним, прежде чем писать нем код.

Все хорошо, чем больше таких людей не понимающих что они делают, тем ценней понимающие сотрудники

Я и учу js)

Стикер

Для чего используете export у функции? Вы подключаете ее в другом файле и используете таскменеджер для этого? Если нет, уберите export , и вызовите эту функцию, и "Ваш" код работает. Что бы класс убирался когда больше 12px , то Вам нужно переписать немного условие, и не нужно использовать querySelectorAll для '.header' и '.header__menu' если они одни на странице, тогда Вам не придется применять к ним метод forEach, что бы работать с ними. Пример - https://jsfiddle.net/z6myau59/2/ . Правда, я не совсем понимаю для чего Вам это нужно, когда можно обойтись CSS.

Я функцию импортирую, так как использую компонентный подход

А "querySelectorAll" использовал, чтобы это функция работала для всех ".header"

Сколько у Вас их на одной странице???

Один). Я на будущее)

.