1 estrella en GitHub = 1 componente nuevo.

Dar una estrella
Navegaciónburgericonanimated

Animated Burger Menu

Icono de hamburguesa con animación de metamorfosis hacia una X de cierre al activarse.

Uso

Copia y pega este código directamente en tu componente React:

tsx
import { BurgerMorphIcon } from 'react-component-kit-ui/navigation';

<BurgerMorphIcon>Content</BurgerMorphIcon>

Instalación Manual

Si no estás usando el paquete npm, crea un archivo nuevo y pega el siguiente código: src/components/BurgerMorphIcon.tsx + BurgerMorphIcon.css:

BurgerMorphIcon.tsx
'use client';

import './BurgerMorphIcon.css';
// TODO(port): inline handler onClick="this.classList.toggle('active')"

/** BurgerMorphIcon — ported from astro-component-kit. */
export interface BurgerMorphIconProps {
}

export function BurgerMorphIcon({}: BurgerMorphIconProps) {
  return (
    <>
      <button className="burger" data-rk-641974="">
        <span data-rk-641974=""></span><span data-rk-641974=""></span><span data-rk-641974=""></span>
      </button>
    </>
  );
}

export default BurgerMorphIcon;
BurgerMorphIcon.css
/* BurgerMorphIcon — ported from astro-component-kit (navigation/BurgerMorphIcon.astro) */

.burger:where([data-rk-641974]) { background: none; border: none; width: 30px; height: 24px; cursor: pointer; display: flex; flex-direction: column; justify-content: space-between; }
.burger:where([data-rk-641974]) span:where([data-rk-641974]) { width: 100%; height: 3px; background: #fff; border-radius: 2px; transition: 0.4s; }
.burger.active:where([data-rk-641974]) span:nth-child(1):where([data-rk-641974]) { transform: translateY(10.5px) rotate(45deg); }
.burger.active:where([data-rk-641974]) span:nth-child(2):where([data-rk-641974]) { opacity: 0; }
.burger.active:where([data-rk-641974]) span:nth-child(3):where([data-rk-641974]) { transform: translateY(-10.5px) rotate(-45deg); }

Información Rápida

Categoría
Navegación
Nombre de archivo
BurgerMorphIcon.tsx
Dependencias
Ninguna — React + CSS puro
Etiquetas
burgericonanimated