const hamburgerMenu=document.createElement("template");hamburgerMenu.innerHTML='\n<style>\n*{\n    padding: 0;\n    margin: 0;\n    -webkit-box-sizing: border-box;\n            box-sizing: border-box;\n} \n:host{\n    display: flex;\n    width: 100%;\n    height: 100%;\n    overflow-y: auto;\n    scrollbar-width: thin;\n    --padding: 0 0 3rem 0;\n    --backdrop-color: rgba(0,0,0,0.5);\n}\n.backdrop{\n    position: fixed;\n}\n.side-nav{\n    display: flex;\n    flex-direction: column;\n    width: 100%;\n}\n.hide{\n    display: none !important;\n}\n@media screen and (max-width: 640px){\n    :host{\n        position: fixed;\n        z-index: 10;\n    }\n    .side-nav{\n        height: 100%;\n        overflow-y: auto;  \n        width: calc(100% - 4rem);\n        transition: transform 0.3s;\n        background-color: rgba(var(--background-color, (255, 255, 255)), 1);\n        box-shadow: 0.5rem 0 2rem rgba(0,0,0, 0.1);\n        z-index: 1;\n    }\n    .side-nav:not(.reveal){\n        transform: translateX(-100%);\n    }\n    .reveal{\n        transform: none;\n    }\n    .backdrop{\n        top: 0;\n        bottom: 0;\n        left: 0;\n        right: 0;\n        background-color: var(--backdrop-color);\n        -webkit-transition: opacity 0.3s;\n        -o-transition: opacity 0.3s;\n        transition: opacity 0.3s;\n    }\n}\n@media screen and (min-width: 640px){\n    .backdrop{\n        pointer-events: none;\n    }\n}\n@media (any-hover: hover){\n    ::-webkit-scrollbar{\n        width: 0.5rem;\n    }\n    ::-webkit-scrollbar-thumb{\n        border-radius: 1rem;\n        background: rgba(var(--text-color, (17,17,17)), 0.3);\n        &:hover{\n            background: rgba(var(--text-color, (17,17,17)), 0.5);\n        }\n    }\n}\n</style>\n<section class="backdrop hide"></section>\n<nav class="side-nav">\n    <slot></slot>\n</nav>\n';class HamburgerMenu extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}).append(hamburgerMenu.content.cloneNode(!0)),this.resumeScrolling=this.resumeScrolling.bind(this),this.open=this.open.bind(this),this.close=this.close.bind(this),this.sideNav=this.shadowRoot.querySelector(".side-nav"),this.backdrop=this.shadowRoot.querySelector(".backdrop"),this.isOpen=!1,this.animeOptions={duration:300,easing:"ease"}}static get observedAttributes(){return["open"]}resumeScrolling(){const n=document.body.style.top;window.scrollTo(0,-1*parseInt(n||"0")),setTimeout(()=>{document.body.style.overflow="auto",document.body.style.top="initial"},300)}open(){this.isOpen||(document.body.style.overflow="hidden",document.body.style.top=`-${window.scrollY}px`,this.classList.remove("hide"),this.sideNav.classList.add("reveal"),this.backdrop.classList.remove("hide"),this.backdrop.animate([{opacity:0},{opacity:1}],this.animeOptions).onfinish=(()=>{this.isOpen=!0,this.setAttribute("open","")}))}close(){this.isOpen&&(this.sideNav.classList.remove("reveal"),this.backdrop.animate([{opacity:1},{opacity:0}],this.animeOptions).onfinish=(()=>{this.backdrop.classList.add("hide"),this.classList.add("hide"),this.isOpen=!1,this.removeAttribute("open")}))}connectedCallback(){this.backdrop.addEventListener("click",this.close);const n=new ResizeObserver(n=>{window.innerWidth<640&&this.isOpen?this.classList.remove("hide"):this.classList.add("hide"),window.innerWidth>640&&this.classList.remove("hide")});n.observe(this)}disconnectedCallback(){this.backdrop.removeEventListener("click",this.close)}attributeChangedCallback(n,e,t){"open"===n&&this.hasAttribute("open")&&this.open()}}window.customElements.define("hamburger-menu",HamburgerMenu);