slide-in-menu/dist/slide-in.umd.js

A reusable slide-in dropdown menu

!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.SlideIn=t():e.SlideIn=t()}(this,(()=>(()=>{"use strict";var e={56:(e,t,n)=>{e.exports=function(e){var t=n.nc;t&&e.setAttribute("nonce",t)}},72:e=>{var t=[];function n(e){for(var n=-1,o=0;o<t.length;o++)if(t[o].identifier===e){n=o;break}return n}function o(e,o){for(var a={},i=[],s=0;s<e.length;s++){var c=e[s],l=o.base?c[0]+o.base:c[0],u=a[l]||0,d="".concat(l," ").concat(u);a[l]=u+1;var p=n(d),f={css:c[1],media:c[2],sourceMap:c[3],supports:c[4],layer:c[5]};if(-1!==p)t[p].references++,t[p].updater(f);else{var g=r(f,o);o.byIndex=s,t.splice(s,0,{identifier:d,updater:g,references:1})}i.push(d)}return i}function r(e,t){var n=t.domAPI(t);return n.update(e),function(t){if(t){if(t.css===e.css&&t.media===e.media&&t.sourceMap===e.sourceMap&&t.supports===e.supports&&t.layer===e.layer)return;n.update(e=t)}else n.remove()}}e.exports=function(e,r){var a=o(e=e||[],r=r||{});return function(e){e=e||[];for(var i=0;i<a.length;i++){var s=n(a[i]);t[s].references--}for(var c=o(e,r),l=0;l<a.length;l++){var u=n(a[l]);0===t[u].references&&(t[u].updater(),t.splice(u,1))}a=c}}},113:e=>{e.exports=function(e,t){if(t.styleSheet)t.styleSheet.cssText=e;else{for(;t.firstChild;)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(e))}}},314:e=>{e.exports=function(e){var t=[];return t.toString=function(){return this.map((function(t){var n="",o=void 0!==t[5];return t[4]&&(n+="@supports (".concat(t[4],") {")),t[2]&&(n+="@media ".concat(t[2]," {")),o&&(n+="@layer".concat(t[5].length>0?" ".concat(t[5]):""," {")),n+=e(t),o&&(n+="}"),t[2]&&(n+="}"),t[4]&&(n+="}"),n})).join("")},t.i=function(e,n,o,r,a){"string"==typeof e&&(e=[[null,e,void 0]]);var i={};if(o)for(var s=0;s<this.length;s++){var c=this[s][0];null!=c&&(i[c]=!0)}for(var l=0;l<e.length;l++){var u=[].concat(e[l]);o&&i[u[0]]||(void 0!==a&&(void 0===u[5]||(u[1]="@layer".concat(u[5].length>0?" ".concat(u[5]):""," {").concat(u[1],"}")),u[5]=a),n&&(u[2]?(u[1]="@media ".concat(u[2]," {").concat(u[1],"}"),u[2]=n):u[2]=n),r&&(u[4]?(u[1]="@supports (".concat(u[4],") {").concat(u[1],"}"),u[4]=r):u[4]="".concat(r)),t.push(u))}},t}},365:(e,t,n)=>{n.d(t,{A:()=>s});var o=n(601),r=n.n(o),a=n(314),i=n.n(a)()(r());i.push([e.id,'\n   /* Container sits off‐canvas to the left */\n.slide-in {\n   position: fixed;\n   top: 0;\n   left: -250px;            /* hide off‑screen */\n   width: 90%;\n   height: 100%;\n   box-shadow: 2px 0 6px rgba(0,0,0,0.2);\n   transition: left 0.3s ease;\n   overflow-y: auto;\n   z-index: 1000;\n}\n \n   /* When active, slide in */\n.slide-in.active {\n   left: 0;\n}\n \n   /* Hamburger/close button container */\n.si-toggle {\n   position: fixed;\n   top: 1rem;\n   left: 1rem;\n   cursor: pointer;\n   z-index: 1001;\n   width: 2rem;\n   height: 2rem;\n}\n \n   /* Simple icon styles (you could swap in SVGs) */\n.si-toggle .bar,\n.si-toggle .bar::before,\n.si-toggle .bar::after {\n   display: block;\n   width: 100%;\n   height: 4px;\n   background: #333;\n   position: absolute;\n   transition: transform 0.3s ease, opacity 0.3s ease;\n}\n\n.si-toggle .bar::before {\n   content: "";\n   top: -8px;\n}\n\n.si-toggle .bar::after  {\n   content: "";\n   top: +8px;\n}\n \n   /* Rotate to “X” when active */\n.si-toggle.active .bar {\n   background: transparent;\n}\n\n.si-toggle.active .bar::before {\n   transform: translateY(8px) rotate(45deg);\n}\n.si-toggle.active .bar::after {\n   transform: translateY(-8px) rotate(-45deg);\n}\n ',""]);const s=i},540:e=>{e.exports=function(e){var t=document.createElement("style");return e.setAttributes(t,e.attributes),e.insert(t,e.options),t}},601:e=>{e.exports=function(e){return e[1]}},659:e=>{var t={};e.exports=function(e,n){var o=function(e){if(void 0===t[e]){var n=document.querySelector(e);if(window.HTMLIFrameElement&&n instanceof window.HTMLIFrameElement)try{n=n.contentDocument.head}catch(e){n=null}t[e]=n}return t[e]}(e);if(!o)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");o.appendChild(n)}},825:e=>{e.exports=function(e){if("undefined"==typeof document)return{update:function(){},remove:function(){}};var t=e.insertStyleElement(e);return{update:function(n){!function(e,t,n){var o="";n.supports&&(o+="@supports (".concat(n.supports,") {")),n.media&&(o+="@media ".concat(n.media," {"));var r=void 0!==n.layer;r&&(o+="@layer".concat(n.layer.length>0?" ".concat(n.layer):""," {")),o+=n.css,r&&(o+="}"),n.media&&(o+="}"),n.supports&&(o+="}");var a=n.sourceMap;a&&"undefined"!=typeof btoa&&(o+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(a))))," */")),t.styleTagTransform(o,e,t.options)}(t,e,n)},remove:function(){!function(e){if(null===e.parentNode)return!1;e.parentNode.removeChild(e)}(t)}}}}},t={};function n(o){var r=t[o];if(void 0!==r)return r.exports;var a=t[o]={id:o,exports:{}};return e[o](a,a.exports,n),a.exports}n.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return n.d(t,{a:t}),t},n.d=(e,t)=>{for(var o in t)n.o(t,o)&&!n.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:t[o]})},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),n.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.nc=void 0;var o={};n.r(o),n.d(o,{default:()=>b});var r=n(72),a=n.n(r),i=n(825),s=n.n(i),c=n(659),l=n.n(c),u=n(56),d=n.n(u),p=n(540),f=n.n(p),g=n(113),v=n.n(g),h=n(365),m={};m.styleTagTransform=v(),m.setAttributes=d(),m.insert=l().bind(null,"head"),m.domAPI=s(),m.insertStyleElement=f(),a()(h.A,m),h.A&&h.A.locals&&h.A.locals;class b{constructor(e,{onToggle:t=()=>{}}={}){this.container="string"==typeof e?document.querySelector(e):e,this.toggle=document.createElement("div"),this.toggle.classList.add("si-toggle"),this.toggle.innerHTML='<span class="bar"></span>',document.body.appendChild(this.toggle),this.onToggle=t,this.toggle.addEventListener("click",(()=>this._toggle()))}_toggle(){const e=this.container.classList.toggle("active");this.toggle.classList.toggle("active",e),this.onToggle(e)}toggleSidebar(){this._toggle()}}return o})()));