react-animated-menuicon
Version:
An animated hamburger menu icon in React
3 lines (2 loc) • 1.75 kB
JavaScript
"use strict";var e=require("react");!function(e,n){void 0===n&&(n={});var t=n.insertAt;if(e&&"undefined"!=typeof document){var s=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===t&&s.firstChild?s.insertBefore(r,s.firstChild):s.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.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 n={sm:"1rem",md:"2rem",lg:"2.5rem",xl:"3rem",custom:"1em"};exports.MenuIcon=({open:n,toggleMenu:t,options:s})=>{const{size:r,type:a,color:o}=s;return e.createElement("button",{onClick:t,style:{width:r},className:"menu-icon"},["first","second","third"].map((t=>e.createElement("div",{key:t,style:{background:o},className:`bar ${n?a:""}`}))))},exports.useMenuIcon=({size:t="md",type:s="base",color:r="#00000"})=>{const[a,o]=e.useState(!1),i={size:n[t]||"2rem",type:s||"base",color:CSS.supports("color",r)?r:"#000000"};return{open:a,toggleMenu:()=>{o(!a)},options:i}};
//# sourceMappingURL=index.js.map