2

Este código es un script para darle funcionamiento a un Sidebar, poder ocultarlo, cambiar la pantalla a modo oscuro y añadir funciones a los items que este contiene, el script está hecho en JavaScript, y por motivos laborales requiero pasarlo a React usando hooks como useState() y useEffect(). Si alguien pudiese echarme una mano estaría muy agradecido.

Este es el código en Js:

<script>
      const body = document.querySelector('body'),
        sidebar = body.querySelector('nav'),
        toggle = body.querySelector('.toggle'),
        searchBtn = body.querySelector('.search-box'),
        modeSwitch = body.querySelector('.toggle-switch'),
        modeText = body.querySelector('.mode-text');

      toggle.addEventListener('click', () => {
        sidebar.classList.toggle('close');
      });

      searchBtn.addEventListener('click', () => {
        sidebar.classList.remove('close');
      });

      modeSwitch.addEventListener('click', () => {
        body.classList.toggle('dark');

        if (body.classList.contains('dark')) {
          modeText.innerText = 'Light mode';
        } else {
          modeText.innerText = 'Dark mode';
        }
      });
</script> 

Y este es el componente SideBar usando React:

function Sidebar() {
  const navigate = useNavigate();

  return (
    <nav className="sidebar close">
      <header>
        <i className="bx bx-chevron-right toggle"></i>
      </header>

      <div class="menu-bar">
        <div class="menu">
          <ul>
            <li class="search-box">
              <i class="bx bx-search icon"></i>
              <input type="text" placeholder="Search..." />
            </li>
          </ul>
        </div>

        <div class="bottom-content">
          <ul>
            <li class="mode">
              <div class="sun-moon">
                <i class="bx bx-moon icon moon"></i>
                <i class="bx bx-sun icon sun"></i>
              </div>
              <span class="mode-text text">Dark mode</span>

              <div class="toggle-switch">
                <span class="switch"></span>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  );
}

export default Sidebar;
0

1 respuesta 1

2

Tu HTML tal y como está ahora tiene clases estáticas que son strings.

Pero puedes hacerlas dinámicas pasándoles a cada atributo className un operador ternario dentro que determine si se mostrará una clase u otra.

Algo así:

 return (
    <nav className={close ? "sidebar close" : "sidebar"}> ...

El operador ternario evaluará el estado close que será true o false dependiendo de las funciones que crees para setear dicho estado.

Por ejemplo:

 const [close, setClose] = useState(false);
 
 ...
 
 <li class="search-box" onClick={() => setClose(true)}>

Te dejo una pregunta que tiene otro ejemplo más de lo que digo:

React conditional style on custom click

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.