sidebar-1

• Vista previa

• Código

  import Image from 'next/image';
  import Link from 'next/link';
  
  const Sidebar1 = () => {
    return (
      <aside className="flex flex-col justify-between gap-8 bg-background-secondary min-h-screen max-h-screen w-80 p-4 overflow-y-scroll">
        <section>
          <div className="logo flex items-center gap-4 mb-8">
            <h1 className="flex items-center justify-center w-10 h-10 bg-indigo-500 p-2 rounded-xl font-extrabold text-white">
              UI
            </h1>
            <div>
              <h3 className="font-bold text-indigo-500">ElementumUI</h3>
              <p className="text-xs text-muted-foreground">Diseño UI de componentes</p>
            </div>
          </div>
          <form>
            <input
              type="text"
              className="w-full py-2 px-4 rounded-lg outline-none bg-background placeholder:text-muted-foreground"
              placeholder="Buscar..."
            />
          </form>
          <ul className="mt-4 mb-8">
            <li>
              <Link href="#" className="flex items-center gap-4 p-2 hover:bg-background transition-colors rounded-lg">
                <i className="fi fi-rr-inbox-in"></i>
                <span>Bandeja de entrada</span>
              </Link>
            </li>
            <li>
              <Link href="#" className="flex items-center gap-4 p-2 hover:bg-background transition-colors rounded-lg">
                <i className="fi fi-rr-bell"></i>
                <span>Actividad</span>
              </Link>
            </li>
            <li>
              <Link href="#" className="flex items-center gap-4 p-2 hover:bg-background transition-colors rounded-lg">
                <i className="fi fi-rr-calendar-day"></i>
                <span>Calendario</span>
              </Link>
            </li>
          </ul>
          <hr className="my-8 border-gray-500" />
          <h5 className="uppercase font-semibold text-xs text-indigo-600 tracking-[2px] mb-4">Menu</h5>
          <ul>
            <li>
              <Link href="#" className="flex items-center gap-4 p-2 hover:bg-background transition-colors rounded-lg">
                <i className="fi fi-rr-document"></i>
                <span>Documentos</span>
              </Link>
            </li>
            <li>
              <Link href="#" className="flex items-center gap-4 p-2 hover:bg-background transition-colors rounded-lg">
                <i className="fi fi-rr-ticket"></i>
                <span>Tickets</span>
              </Link>
            </li>
            <li>
              <Link href="#" className="flex items-center gap-4 p-2 hover:bg-background transition-colors rounded-lg">
                <i className="fi fi-rr-users-alt"></i>
                <span>Usuarios</span>
              </Link>
            </li>
          </ul>
          <h5 className="uppercase font-semibold text-xs text-indigo-600 tracking-[2px] my-4">Proyectos</h5>
          <ul>
            <li>
              <Link href="#" className="flex items-center gap-4 p-2 hover:bg-background transition-colors rounded-lg">
                <i className="fi fi-rr-apps text-indigo-500"></i>
                <span>Personales</span>
              </Link>
            </li>
            <li>
              <Link href="#" className="flex items-center gap-4 p-2 hover:bg-background transition-colors rounded-lg">
                <i className="fi fi-rr-apps text-sky-500"></i>
                <span>Negocio</span>
              </Link>
            </li>
            <li>
              <Link href="#" className="flex items-center gap-4 p-2 hover:bg-background transition-colors rounded-lg">
                <i className="fi fi-rr-apps text-purple-500"></i>
                <span>Viajes</span>
              </Link>
            </li>
          </ul>
        </section>
        <section>
          <ul className="my-4">
            <li>
              <Link href="#" className="flex items-center gap-4 p-2 hover:bg-background transition-colors rounded-lg">
                <i className="fi fi-rr-settings"></i>
                <span>Ajustes</span>
              </Link>
            </li>
            <li>
              <a href="#" className="flex items-center gap-4 p-2 hover:bg-background transition-colors rounded-lg">
                <i className="fi fi-rr-interrogation"></i>
                <span>Ayuda</span>
              </a>
            </li>
          </ul>
          <div className="flex items-center gap-4 pt-4 border-t">
            <div className="relative w-10 h-10">
              <Image
                src="https://res.cloudinary.com/jotredev/image/upload/v1698247714/ElementumUI/hombres/a-parque-atracciones-que-mira-camara_qxn9il.webp"
                alt="Image"
                loading="lazy"
                fill
                className="object-cover object-top rounded-xl ring-2 ring-background"
              />
            </div>
            <div>
              <h3 className="font-bold">Jorge Luis Trejo Payan</h3>
              <p className="text-xs text-muted-foreground">Desarrollador Frontend SR</p>
            </div>
          </div>
        </section>
      </aside>
    );
  };
  
  export default Sidebar1;