react-animated-menuicon
Version:
An animated hamburger menu icon in React
3 lines (2 loc) • 1.74 kB
JavaScript
import e,{useState as n}from"react";!function(e,n){void 0===n&&(n={});var t=n.insertAt;if(e&&"undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===t&&r.firstChild?r.insertBefore(a,r.firstChild):r.appendChild(a),a.styleSheet?a.styleSheet.cssText=e:a.appendChild(document.createTextNode(e))}}(".menu-icon {\n display: flex;\n flex-direction: column;\n justify-content: space-evenly;\n overflow: hidden;\n aspect-ratio: 1 / 1;\n}\n\n.bar {\n width: 100%;\n height: 20%;\n border-radius: 2px;\n transition: all 0.2s linear;\n}\n\n/* base animation */\n\n.base:first-child {\n transform: translateY(150%) rotate(45deg);\n}\n\n.base:nth-child(even) {\n opacity: 0;\n transform: translateX(200%);\n}\n\n.base:last-child {\n transform: translateY(-150%) rotate(-45deg);\n}\n\n/* spin animation */\n.spin:first-child {\n transform: translateY(150%) rotate(405deg);\n}\n\n.spin:nth-child(even) {\n opacity: 0;\n transform: translateX(-200%) rotate(365deg);\n}\n\n.spin:last-child {\n transform: translateY(-150%) rotate(495deg);\n}\n");const t=({open:n,toggleMenu:t,options:r})=>{const{size:a,type:s,color:o}=r;return e.createElement("button",{onClick:t,style:{width:a},className:"menu-icon"},["first","second","third"].map((t=>e.createElement("div",{key:t,style:{background:o},className:`bar ${n?s:""}`}))))},r={sm:"1rem",md:"2rem",lg:"2.5rem",xl:"3rem",custom:"1em"},a=({size:e="md",type:t="base",color:a="#00000"})=>{const[s,o]=n(!1),i={size:r[e]||"2rem",type:t||"base",color:CSS.supports("color",a)?a:"#000000"};return{open:s,toggleMenu:()=>{o(!s)},options:i}};export{t as MenuIcon,a as useMenuIcon};
//# sourceMappingURL=index.js.map