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;