import { useState } from "react"; const App = () => { const [open, setOpen] = useState(true); const Menus = [ { title: "Home", src: "0" }, { title: "Site1", src: "1", gap: true }, { title: "Site2 ", src: "2" }, { title: "Site3", src: "3" }, { title: "Site4", src: "4" } ]; return ( <div className="flex"> <div className={` ${ open ? "w-72" : "w-20 " } bg-gray-800 p-5 pt-8 sticky top-0 left-0 h-[930px] duration-300`} > <img src="./src/assets/control.png" className={`absolute cursor-pointer -right-3 top-9 w-7 border-dark-purple border-2 rounded-full ${!open && "rotate-180"}`} onClick={() => setOpen(!open)} /> <div className="flex gap-x-4 items-center"> <img src="./src/assets/logo.png" className={`cursor-pointer duration-500 ${ open && "rotate-[360deg]" }`} /> <h1 className={`text-white origin-left font-medium text-xl duration-200 ${ !open && "scale-0" }`} > Site </h1> </div> <ul className="pt-6"> {Menus.map((Menu, index) => ( <li key={index} className={`flex rounded-MD p-2 cursor-pointer hover:bg-light-white text-gray-300 text-sm items-center gap-x-4 ${Menu.gap ? "mt-9" : "mt-2"} ${ index === 0 && "bg-light-white" } `} > <img src={`./src/assets/${Menu.src}.png`} /> <span className={`${!open && "hidden"} origin-left duration-200`}> {Menu.title} </span> </li> ))} </ul> </div>Este es el código que obtuve después de seguir este tutorial: Tutorial
¿Cómo puedo vincular mis otras páginas con la barra de navegación? Entonces, al hacer clic, por ejemplo, en el Sitio1, se dirigirá al usuario al Sitio1.
El problema es que no puedo usar etiquetas o hfref en este caso y no tengo idea de cómo resolver mi problema ya que solo estoy aprendiendo a reaccionar.
Eche un vistazo y lea el enrutador React: https://reactrouter.com/en/main/getting-started/tutorial
Para crear un enlace, use la etiqueta en lugar de la etiqueta
Múltiples cosas que puedes hacer aquí. Si desea seguir con los botones en los que se puede hacer clic, puede usar React Router y, para cada Menu , agregue un onClick={() => router.push(Menu.title)} (sujeto a cualquiera que sea su URL real).
De lo contrario, de una manera más nativa, podría usar etiquetas a lugar de etiquetas de span , que pueden recibir href={Menu.title} . La desventaja aquí es que tendría que volver a diseñarlos, ya que las etiquetas tienen estilos predeterminados específicos del navegador.