@flexilla/alpine-navbar
Version:
AlpineJS plugin for easily adding interactive navbar
2 lines (1 loc) • 1.22 kB
JavaScript
(()=>{var o=(r,n=document.body)=>n.querySelector(r);var d=({navbarElement:r,onToggle:n})=>{let t=typeof r=="string"?o(r):r;if(!(t instanceof HTMLElement))return;let i=t.getAttribute("id"),a=o(`[data-nav-trigger][data-toggle-nav=${i}]`),e=o(`[data-nav-overlay][data-navbar-id=${i}]`),l=()=>{let m=t.dataset.state||"close",c=m==="open"?"close":"open";t.setAttribute("data-state",c),a&&(a.ariaExpanded=m==="open"?"false":"true"),e&&(e.ariaHidden="true",e.setAttribute("data-state",c)),n?.({isExpanded:c==="open"})};a&&a.addEventListener("click",l);let s=()=>{t.setAttribute("data-state","close"),a?.setAttribute("aria-expanded","false"),e&&e.setAttribute("data-state","close"),n?.({isExpanded:!1})};return t.addEventListener("click",s),e instanceof HTMLElement&&!e.hasAttribute("data-static-overlay")&&e.addEventListener("click",s),{cleanup:()=>{e instanceof HTMLElement&&!e.hasAttribute("data-static-overlay")&&(t.removeEventListener("click",s),a&&a.removeEventListener("click",l),e.removeEventListener("click",s))},close:s,toggle:l}};function b(r){r.directive("navbar",(n,{},{cleanup:t})=>{let i=d({navbarElement:n});t(()=>{i.cleanup()})})}var u=b;document.addEventListener("alpine:init",()=>{u(window.Alpine)});})();