wakenbyWork

window.addEventListener('load', () => {
  const toggle = document.querySelector('#js-toggle')
  const body = document.querySelector('#js-body')
  const nav = document.querySelector('#js-nav')
  const menuBg = document.querySelector('#js-menu-bg')
  const toggleNav = document.querySelector('#js-toggle-nav')
  
  const openCloseMenu = () => {
    toggle.classList.toggle('toggle--active')
    body.classList.toggle('body--overflow')
    nav.classList.toggle('header__nav--active')
    menuBg.classList.toggle('menu-bg--active')
  }

  for (const clickEl of [toggle, toggleNav, menuBg]) {
    clickEl.addEventListener('click', openCloseMenu)
  }
})

Нормальный ли прием с arrayElemOnClick ?

$(document).ready(function() {
    const url = document.location.href;
    var link = $('.tg-button > a');

    var href = 'https://ya.ru?';

    if(url.match(/utm_source=/)){
        href += '&utm_source=' + window.location.search.split('utm_source=')[1].split('&')[0];
    }

    if(url.match(/utm_medium=/)){
        href += '&utm_medium=' +  window.location.search.split('utm_medium=')[1].split('&')[0];
    }

    if(url.match(/utm_campaign=/)){
        href += '&utm_campaign=' + window.location.search.split('utm_campaign=')[1].split('&')[0];
    }

    link.attr('href',  href);
});

.phone {
  $self: &;
  
  display: flex;
  gap: 10px;

  &--test {
    #{$self}__link {
      color: red !important;
    }
  }
}

import styles from './Phone.module.scss'
import classNames from 'classnames'

const Phone = () => {
    const mode = 'test'
    
    const clazz = classNames({
        [styles['phone']]: true,
        [styles['phone--test']]: mode === 'test'
    })

    return (
        <div className={clazz}>
            <Link to={'tel:88005553555'} className={styles.phone__icon}>
                <img src={'/images/svg/phone.svg'} alt="Иконка телефона" />
            </Link>

            <Link to={'tel:88005553555'} className={styles.phone__link}>+7 (495) 648 90 55</Link>
        </div>
    )
}

export default Phone

const Phone = () => {
    const mode = 'test'

    const clazz = classNames({
        [styles['phone']]: true,
        [styles['phone--test']]: mode === 'test'
    })

    return (
        <Link to={'tel:88005553555'} className={clazz}>
            <img className={styles.phone__icon} src={'/images/svg/phone.svg'} alt="Иконка телефона" />

            <div className={styles.phone__link}>+7 (495) 648 90 55</div>
        </Link>
    )
}

$('.reload-img img').each(function () {
  const src = $(this).attr('src')
  $(this).attr('src', `${src}?${Math.random()}`)
})

const target = document.querySelector('.applications__grid')

const intersectionObserverOptions = {
  root: null,
  threshold: 0.8
}

const observer = new IntersectionObserver(onIntersection, intersectionObserverOptions)

function onIntersection (entries, opts) {
  for (const entry of entries) {
    if (entry.intersectionRatio > 0) {
      alert('Появился')

      observer.unobserve(entry.target)
    }
  }
}

observer.observe(target)

.class {
  align-items: flex-start;
}