react-hamburger-drawer/dist/index.js

Simple lightweight react hamburger navigation drawer.

(()=>{var e={344:(e,n,r)=>{"use strict";r.d(n,{c:()=>s});var t=r(500),a=r.n(t),o=r(312),i=r.n(o)()(a());i.push([e.id,"/**\n * Main styles for the navigation drawer component.\n *\n * @see https://material.io/components/navigation-drawer\n * @see https://material.io/design/motion/speed.html\n * @see https://google.github.io/styleguide/htmlcssguide.html\n * @see https://github.com/google/closure-stylesheets\n */\n\n.HamburgerDrawer .HamburgerDrawer-icon span,\n.HamburgerDrawer .HamburgerDrawer-icon span::before,\n.HamburgerDrawer .HamburgerDrawer-icon span::after {\n  /* The hamburger icon lines color. */\n  background-color: gray;\n}\n\n.HamburgerDrawer input:focus ~ .HamburgerDrawer-icon {\n  color: gray;\n  outline: auto;\n}\n\n.HamburgerDrawer label {\n  /* The scrim background color. */\n  background-color: black;\n  /* Hides label text behind the drawer. */\n  color: transparent;\n  text-align: left;\n}\n\n.HamburgerDrawer,\n.HamburgerDrawer .HamburgerDrawer-panel {\n  background-color: white;\n}\n\n.HamburgerDrawer .HamburgerDrawer-panel {\n  box-shadow: 4px 0 12px rgba(0, 0, 0, 0.25);\n  /*\n    * Modal navigation drawer\n    * @see https://material.io/components/navigation-drawer#specs\n    */\n  width: calc(100% - 56px);\n  padding-top: 74px;\n}\n\n@media only screen and (min-width: 768px) {\n  .HamburgerDrawer .HamburgerDrawer-panel {\n    /*\n      * Standard navigation drawer\n      * @see https://material.io/components/navigation-drawer#specs\n      */\n    width: 256px;\n  }\n}\n\n.HamburgerDrawer {\n  display: block;\n  position: absolute;\n  -webkit-user-select: none;\n  user-select: none;\n  z-index: 91;\n}\n\n.HamburgerDrawer input,\n.HamburgerDrawer .HamburgerDrawer-icon {\n  cursor: pointer;\n  height: 38px;\n  padding-left: 4px;\n  position: absolute;\n  width: 40px;\n  z-index: 92;\n}\n\n.HamburgerDrawer input {\n  appearance: none;\n  display: block;\n  opacity: 0;\n  z-index: 93;\n  -webkit-touch-callout: none;\n}\n\n/*\n  * Hamburger icon anatomy:\n  * span - first line\n  * span:before - middle line\n  * span:after - last line\n  */\n.HamburgerDrawer .HamburgerDrawer-icon span,\n.HamburgerDrawer .HamburgerDrawer-icon span:before,\n.HamburgerDrawer .HamburgerDrawer-icon span:after {\n  border-radius: 4px;\n  height: 2px;\n  position: absolute;\n  transition: transform 150ms ease;\n  width: 36px;\n}\n\n.HamburgerDrawer .HamburgerDrawer-icon span {\n  display: block;\n  margin-top: 8px;\n  transition-duration: 400ms;\n  transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);\n}\n\n.HamburgerDrawer .HamburgerDrawer-icon span:before,\n.HamburgerDrawer .HamburgerDrawer-icon span:after {\n  content: \"\";\n  display: block;\n}\n\n.HamburgerDrawer .HamburgerDrawer-icon span:before {\n  top: 10px;\n  transition: opacity 150ms ease 100ms;\n}\n\n.HamburgerDrawer .HamburgerDrawer-icon span:after {\n  bottom: -10px;\n  top: 20px;\n  transition: transform 400ms cubic-bezier(0.68, -0.55, 0.265, 1.55);\n}\n\n.HamburgerDrawer input:checked ~ .HamburgerDrawer-icon span {\n  transform: translate3d(0, 10px, 0) rotate(135deg);\n  transition-delay: 100ms;\n}\n\n.HamburgerDrawer input:checked ~ .HamburgerDrawer-icon span:before {\n  opacity: 0;\n  transition-delay: 0s;\n}\n\n.HamburgerDrawer input:checked ~ .HamburgerDrawer-icon span:after {\n  transform: translate3d(0, -20px, 0) rotate(-270deg);\n  transition-delay: 100ms;\n}\n\n.HamburgerDrawer input:checked,\n.HamburgerDrawer input:checked ~ .HamburgerDrawer-icon {\n  position: fixed;\n}\n\n/*\n  * Navigation drawer anatomy:\n  * .HamburgerDrawer-panel - navigation drawer panel\n  * label - navigation drawer scrim element.\n  */\n.HamburgerDrawer .HamburgerDrawer-panel,\n.HamburgerDrawer label {\n  bottom: 0;\n  left: 0;\n  position: fixed;\n  right: 0;\n  top: 0;\n  /* The 'visibility' property is used to prevent Tab navigation. */\n  visibility: hidden;\n}\n\n.HamburgerDrawer .HamburgerDrawer-panel {\n  opacity: 0.95;\n  transform-origin: 0% 0%;\n  transform: translate(-200%, 0);\n  /*\n    * Exits and closing:\n    * A navigation drawer opens over 250ms but closes over 200ms.\n    * @see https://material.io/design/motion/speed.html#duration\n    *\n    * Accelerated easing:\n    * Elements exiting a screen use accelerated easing, a transition in which \n    * the element starts at rest and ends at peak velocity.\n    * @see https://material.io/design/motion/speed.html#easing\n    */\n  transition: transform 200ms cubic-bezier(0.4, 0, 1, 1), visibility 1s linear;\n}\n\n.HamburgerDrawer label {\n  cursor: default;\n  display: block;\n  opacity: 0;\n  transition: opacity 250ms linear;\n}\n\n.HamburgerDrawer input:checked ~ .HamburgerDrawer-panel,\n.HamburgerDrawer input:checked ~ label {\n  visibility: visible;\n}\n\n.HamburgerDrawer input:checked ~ .HamburgerDrawer-panel {\n  transform: none;\n  /* \n    * Exits and closing:\n    * A navigation drawer opens over 250ms but closes over 200ms.\n    * @see https://material.io/design/motion/speed.html#duration\n    *\n    * Decelerated easing:\n    * Incoming elements are animated using decelerated easing, in which \n    * transitions begin at peak velocity (the fastest point in an element's \n    * movement) and end at rest.\n    * @see https://material.io/design/motion/speed.html#easing\n    */\n  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);\n}\n\n.HamburgerDrawer input:checked ~ label {\n  /*\n    * Scrim color opacity: 32% (1 - 0.32 = 0.68)\n    * @see https://material.io/components/navigation-drawer#theming\n    */\n  opacity: 0.68;\n}\n\n/* Prevents page scrolling when the navigation drawer is open. */\n.HamburgerDrawer-open {\n  overflow: hidden;\n}\n",""]);const s=i},312:e=>{"use strict";e.exports=function(e){var n=[];return n.toString=function(){return this.map((function(n){var r="",t=void 0!==n[5];return n[4]&&(r+="@supports (".concat(n[4],") {")),n[2]&&(r+="@media ".concat(n[2]," {")),t&&(r+="@layer".concat(n[5].length>0?" ".concat(n[5]):""," {")),r+=e(n),t&&(r+="}"),n[2]&&(r+="}"),n[4]&&(r+="}"),r})).join("")},n.i=function(e,r,t,a,o){"string"==typeof e&&(e=[[null,e,void 0]]);var i={};if(t)for(var s=0;s<this.length;s++){var c=this[s][0];null!=c&&(i[c]=!0)}for(var u=0;u<e.length;u++){var l=[].concat(e[u]);t&&i[l[0]]||(void 0!==o&&(void 0===l[5]||(l[1]="@layer".concat(l[5].length>0?" ".concat(l[5]):""," {").concat(l[1],"}")),l[5]=o),r&&(l[2]?(l[1]="@media ".concat(l[2]," {").concat(l[1],"}"),l[2]=r):l[2]=r),a&&(l[4]?(l[1]="@supports (".concat(l[4],") {").concat(l[1],"}"),l[4]=a):l[4]="".concat(a)),n.push(l))}},n}},500:e=>{"use strict";e.exports=function(e){return e[1]}},776:(e,n,r)=>{"use strict";var t=r(143);function a(){}function o(){}o.resetWarningCache=a,e.exports=function(){function e(e,n,r,a,o,i){if(i!==t){var s=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw s.name="Invariant Violation",s}}function n(){return e}e.isRequired=e;var r={array:e,bigint:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:n,element:e,elementType:e,instanceOf:n,node:e,objectOf:n,oneOf:n,oneOfType:n,shape:n,exact:n,checkPropTypes:o,resetWarningCache:a};return r.PropTypes=r,r}},268:(e,n,r)=>{e.exports=r(776)()},143:e=>{"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},252:(e,n,r)=>{(()=>{"use strict";var n={629:function(e,n,r){var t=this&&this.__createBinding||(Object.create?function(e,n,r,t){void 0===t&&(t=r),Object.defineProperty(e,t,{enumerable:!0,get:function(){return n[r]}})}:function(e,n,r,t){void 0===t&&(t=r),e[t]=n[r]}),a=this&&this.__setModuleDefault||(Object.create?function(e,n){Object.defineProperty(e,"default",{enumerable:!0,value:n})}:function(e,n){e.default=n}),o=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var n={};if(null!=e)for(var r in e)"default"!==r&&Object.prototype.hasOwnProperty.call(e,r)&&t(n,e,r);return a(n,e),n};n.__esModule=!0;var i=o(r(689)),s="FocusBounder-link",c=["a[href]:not(.FocusBounder-link):not([disabled])","[tabindex]:not([tabindex='-1']):not([disabled])","[contenteditable]","button:not([disabled]), input:not([disabled])","select:not([disabled]), textarea:not([disabled])"],u={color:"transparent",opacity:0,position:"absolute",width:"1px",height:"1px",overflow:"hidden"};n.default=function(e){var n=e.children,r=e.firstElementIndex,t=void 0===r?0:r,a=e.focusTimeoutDelay,o=void 0===a?0:a,l=e.isEnabled,d=void 0===l||l,p=(0,i.createRef)(),m=(0,i.useCallback)((function(e){if(d&&p.current){var n=p.current.parentNode,r=null==n?void 0:n.querySelectorAll(c.join(",")),t=r[e<0?r.length+e:e];t&&(t.focus(),o&&document.activeElement!==t&&setTimeout((function(){return t.focus()}),o))}}),[d,p,o]);return(0,i.useEffect)((function(){return m(t)}),[m,t]),i.default.createElement(i.default.Fragment,null,i.default.createElement("a",{ref:p,href:"#bounder",onFocus:function(){return m(-1)},className:s,style:u,"aria-hidden":"true",rel:"nofollow"}," "),n,i.default.createElement("a",{href:"#bounder",onFocus:function(){return m(0)},className:s,style:u,"aria-hidden":"true",rel:"nofollow"}," "))}},689:e=>{e.exports=r(992)}},t={},a=function e(r){var a=t[r];if(void 0!==a)return a.exports;var o=t[r]={exports:{}};return n[r].call(o.exports,o,o.exports,e),o.exports}(629);e.exports=a})()},596:e=>{"use strict";var n=[];function r(e){for(var r=-1,t=0;t<n.length;t++)if(n[t].identifier===e){r=t;break}return r}function t(e,t){for(var o={},i=[],s=0;s<e.length;s++){var c=e[s],u=t.base?c[0]+t.base:c[0],l=o[u]||0,d="".concat(u," ").concat(l);o[u]=l+1;var p=r(d),m={css:c[1],media:c[2],sourceMap:c[3],supports:c[4],layer:c[5]};if(-1!==p)n[p].references++,n[p].updater(m);else{var b=a(m,t);t.byIndex=s,n.splice(s,0,{identifier:d,updater:b,references:1})}i.push(d)}return i}function a(e,n){var r=n.domAPI(n);return r.update(e),function(n){if(n){if(n.css===e.css&&n.media===e.media&&n.sourceMap===e.sourceMap&&n.supports===e.supports&&n.layer===e.layer)return;r.update(e=n)}else r.remove()}}e.exports=function(e,a){var o=t(e=e||[],a=a||{});return function(e){e=e||[];for(var i=0;i<o.length;i++){var s=r(o[i]);n[s].references--}for(var c=t(e,a),u=0;u<o.length;u++){var l=r(o[u]);0===n[l].references&&(n[l].updater(),n.splice(l,1))}o=c}}},176:e=>{"use strict";var n={};e.exports=function(e,r){var t=function(e){if(void 0===n[e]){var r=document.querySelector(e);if(window.HTMLIFrameElement&&r instanceof window.HTMLIFrameElement)try{r=r.contentDocument.head}catch(e){r=null}n[e]=r}return n[e]}(e);if(!t)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");t.appendChild(r)}},808:e=>{"use strict";e.exports=function(e){var n=document.createElement("style");return e.setAttributes(n,e.attributes),e.insert(n,e.options),n}},120:(e,n,r)=>{"use strict";e.exports=function(e){var n=r.nc;n&&e.setAttribute("nonce",n)}},520:e=>{"use strict";e.exports=function(e){if("undefined"==typeof document)return{update:function(){},remove:function(){}};var n=e.insertStyleElement(e);return{update:function(r){!function(e,n,r){var t="";r.supports&&(t+="@supports (".concat(r.supports,") {")),r.media&&(t+="@media ".concat(r.media," {"));var a=void 0!==r.layer;a&&(t+="@layer".concat(r.layer.length>0?" ".concat(r.layer):""," {")),t+=r.css,a&&(t+="}"),r.media&&(t+="}"),r.supports&&(t+="}");var o=r.sourceMap;o&&"undefined"!=typeof btoa&&(t+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(o))))," */")),n.styleTagTransform(t,e,n.options)}(n,e,r)},remove:function(){!function(e){if(null===e.parentNode)return!1;e.parentNode.removeChild(e)}(n)}}}},936:e=>{"use strict";e.exports=function(e,n){if(n.styleSheet)n.styleSheet.cssText=e;else{for(;n.firstChild;)n.removeChild(n.firstChild);n.appendChild(document.createTextNode(e))}}},992:e=>{"use strict";e.exports=require("react")}},n={};function r(t){var a=n[t];if(void 0!==a)return a.exports;var o=n[t]={id:t,exports:{}};return e[t](o,o.exports,r),o.exports}r.n=e=>{var n=e&&e.__esModule?()=>e.default:()=>e;return r.d(n,{a:n}),n},r.d=(e,n)=>{for(var t in n)r.o(n,t)&&!r.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:n[t]})},r.o=(e,n)=>Object.prototype.hasOwnProperty.call(e,n),r.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.nc=void 0;var t={};(()=>{"use strict";r.r(t),r.d(t,{HamburgerDrawer:()=>H,default:()=>x});var e=r(992),n=r.n(e),a=r(268),o=r.n(a),i=r(252),s=r.n(i),c=r(596),u=r.n(c),l=r(520),d=r.n(l),p=r(176),m=r.n(p),b=r(120),g=r.n(b),f=r(808),h=r.n(f),v=r(936),w=r.n(v),y=r(344),D={};D.styleTagTransform=w(),D.setAttributes=g(),D.insert=m().bind(null,"head"),D.domAPI=d(),D.insertStyleElement=h(),u()(y.c,D),y.c&&y.c.locals&&y.c.locals;var H=function(e){var r=e.children,t=e.useFocusBounder,a=void 0!==t&&t,o=n().useRef(null),i=a?s():n().Fragment,c=function(e){"Escape"===e.key&&(o.current.checked=!1)};return n().useEffect((function(){return document.addEventListener("keyup",c),function(){return document.removeEventListener("keyup",c)}}),[]),n().createElement(i,null,n().createElement("nav",{className:"HamburgerDrawer","aria-label":"Main menu"},n().createElement("input",{ref:o,type:"checkbox",id:"HamburgerDrawer-toggle","aria-label":"Toggle menu",onKeyUp:function(e){"Enter"===e.key&&(o.current.checked=!o.current.checked)},onClick:function(){document.documentElement.classList.toggle("HamburgerDrawer-open")}}),n().createElement("label",{htmlFor:"HamburgerDrawer-toggle",tabIndex:"-1","aria-hidden":"true",hidden:!0},"Close menu"),n().createElement("div",{className:"HamburgerDrawer-icon",role:"button","aria-label":"Toggle menu"},n().createElement("span",null)),n().createElement("div",{className:"HamburgerDrawer-panel"},r)))};H.propTypes={children:o().node.isRequired,useFocusBounder:o().bool};const x=H})(),module.exports=t})();