Блог

Главная - Вопросы по программированию - Как отобразить другое изображение логотипа, когда открыто меню и класс настроен на активный

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

#html #reactjs #sass

Вопрос:

Я использую react и в настоящее время настроил его так, чтобы, когда пользователь нажимает значок гамбургера на панели навигации, появлялось меню и изменялись цвета панели навигации. Я хотел бы иметь возможность настроить его так, чтобы цвета моего логотипа также менялись в соответствии с этим. У меня уже есть функции, настроенные для изменения цвета моей навигационной панели, что делается путем применения имени класса «активный» при нажатии на значок гамбургера, поэтому я пытался прикрепить это к логотипу и использовать троичный оператор. Однако я не думаю, что мой синтаксис верен, и я даже не уверен, возможно ли это.

 import logoBlack from "../../logo/logo_black.png";
import logoWhite from "../../logo/logo_white.png";

export default function Navbar( { menuOpen, setMenuOpen } ) {
  return (
    <div className={"navbar "   (menuOpen amp;amp; "active")}>
      <div className="wrapper">
        <div className="left">
          <a href="#intro" className={"logo "   (menuOpen amp;amp; "active") } className={"active" ? <img src={logoWhite} /> : <img src={logoBlack} /> }> </a>
          <div className="itemContainer">
            <MailOutlineIcon className="icon"/>
            <span>contact@gmail.com</span>
          </div>
        </div>
        <div className="right">
          <div className="hamburger" onClick={()=>setMenuOpen(!menuOpen)}>
            <span className="line1"></span>
            <span className="line2"></span>
            <span className="line3"></span>
          </div>
        </div>
      </div>
    </div>
  )
}

Если у кого-то есть какие-либо решения, они будут очень признательны! Спасибо! 🙂

Метки: ,