n1ksON

.menu {
  position: fixed;
  top: 0;
  right: 0;
  background: none;
}
@media screen and (max-width: 640px) {
  background: orange !important;
}

$(window).on('load scroll', function() { 
    if ($(this).scrollTop() >= '1') {
        $('.menu').css('background', 'orange');
    } else {
        $('.menu').css('background', 'none');
    }
});

const navbarLinkGenerator = (linksList, toggleMenuHandler) => {
  return linksList.map(({ to, label, exact }, index) => {
    return (
      <li key={`navlink-${index}`}>
        <NavLink to={to} exact={exact} onClick={toggleMenuHandler} activeClassName={cssClasses.active}>{ label }</NavLink>
      </li>
    );
  });
};

const links = [
  { to: '/', label: 'Main', exact: true },
  { to: '/faq', label: 'Faq', exact: false },
  { to: '/contacts', label: 'Contacts', exact: false },
];

const navbarLinkGenerator = (linksList, toggleMenuHandler) => {
  return linksList.map(({ to, label, exact }, index) => {
    return (
      <li key={`navlink-${index}`}>
        <NavLink to={to} exact={exact} onClick={toggleMenuHandler} activeClassName={cssClasses.active}>{ label }</NavLink>
      </li>
    );
  });
};

const navbarLinkGenerator = (linksList, toggleMenuHandler) => {
  return (
    {linksList.map(({ to, label, exact }, index) => 
      <li key={`navlink-${index}`}>
        <NavLink to={to} exact={exact} onClick={toggleMenuHandler} activeClassName={cssClasses.active}>{ label }</NavLink>
      </li>
  )};
)};

useEffect(() => {
  if (isMenuOpen) {
    navbarLinksClasses.push(cssClasses.show);
  }
}, [isMenuOpen])

<a href="google.com">
  <button>Button</button>
</a>

<button>Button</button>
<script>
document.querySelector('button').addEventListener('click', () => {
  window.open('https://google.com')
})
</script>

const divSquare = document.querySelector('.square');
const circle = document.querySelector('.circle');
// divSquare.hidden = false;

document.querySelector('.nbt').onclick = () => {
  const inp1 = document.querySelector('.width').value;
  divSquare.style.border = "1px solid black";
  divSquare.style.width = `${inp1}px`;
  divSquare.style.height = `${inp1}px`;
  divSquare.style.position = 'relative';
}

document.querySelector('.btnz').onclick = () => {
  const inp3 = document.querySelector('.width1').value;
  circle.style.width = `${inp3}px`;
  circle.style.height = `${inp3}px`;
  circle.style.borderRadius = "100%";
  circle.style.background = "rgba(0, 0, 0, .3)";
  circle.style.position = 'absolute';
  circle.style.top = '50%';
  circle.style.left = '50%';
  circle.style.transform = 'translate(-50%, -50%)';
}

document.querySelector('.btnGroup').addEventListener('click', event => {
  let step = +document.querySelector('.width2').value;
  let action = event.target.innerText;
    switch (action) {
      case "Up":
        circle.style.top = circle.offsetTop - step + 'px';
        break;
      case "Left":
        circle.style.left = circle.offsetLeft - step + 'px';
        break;
      case "Down":
        circle.style.top = circle.offsetTop + step + 'px';
        break;
      case "Right":
        circle.style.left = circle.offsetLeft + step + 'px';
        break;
    }
});

commetns

const combinePost = selector.posts?.map(post => ({
       ...post, user: selector.users?.find(user => post.userId === user.id), comments: selector?.comments?.find(comment => post.id === comment.postId)
      }))