lightswind/lightswindv1.0.min.js

A professionally designed animate react component library & templates market that brings together functionality, accessibility, and beautiful aesthetics for modern applications.

let relationalactiveTab="relationalHome";function relationalhandleTabClick(e){relationalactiveTab=e;const t=document.getElementById("relationalactiveTabBackground"),s=["relationalHome","relationalAbout","relationalContact","relationalHelp"];s.forEach((function(t){const s=document.getElementById(t.toLowerCase()+"Btn");t===e?(s.classList.add("text-white"),s.classList.remove("text-gray-700")):(s.classList.remove("text-white"),s.classList.add("text-gray-700"))}));const n=s.indexOf(e);t.style.left=25*n+"%"}document.addEventListener("DOMContentLoaded",(function(){const e=document.getElementById("moderntogglenavbar"),t=document.getElementById("moderntoggleindicator");let s=0;function n(t){s=t,o(),function(){const t=e.getElementsByTagName("a");for(let e=0;e<t.length;e++){const n=t[e];n.classList.remove("opacity-100","scale-125"),n.classList.add("opacity-50","scale-100"),e===s&&n.classList.add("opacity-100","scale-125")}}()}function o(){const e=20*s+10+"%";t.style.left=e}["moderntogglehome","moderntogglebookmark","moderntoggleplus","moderntoggleuser","moderntogglesettings"].forEach(((t,s)=>{const o=document.createElement("li"),l=document.createElement("a");l.href="#",l.innerHTML='<svg class="w-8 h-8 fill-current text-white"><use xlink:href="#'+t+'Icon"></use></svg>',l.classList.add("transition-transform","duration-200","ease-in-out"),l.addEventListener("click",(()=>n(s))),o.appendChild(l),e.appendChild(o)})),o()}));const nav=document.querySelector("nav"),links=document.querySelectorAll("nav ul li a"),highlight=document.getElementById("highlight");function handleHover(e){const t=e.currentTarget.parentNode,{left:s,width:n}=t.getBoundingClientRect(),o=nav.getBoundingClientRect();highlight.style.transform=`translateX(${s-o.left}px)`,highlight.style.width=`${n}px`,links.forEach((e=>e.classList.remove("dynamicNav-highlighted"))),e.currentTarget.classList.add("dynamicNav-highlighted")}function handleClick(e){e.preventDefault(),links.forEach((e=>e.parentNode.classList.remove("dynamicNav-active-link"))),e.currentTarget.parentNode.classList.add("dynamicNav-active-link")}links.forEach((e=>{e.addEventListener("mousemove",handleHover),e.addEventListener("click",handleClick)})),window.addEventListener("DOMContentLoaded",(()=>{const{left:e,width:t}=links[0].parentNode.getBoundingClientRect(),s=nav.getBoundingClientRect();highlight.style.transform=`translateX(${e-s.left}px)`,highlight.style.width=`${t}px`,links[0].classList.add("dynamicNav-highlighted")}));const GlassmorphismSidenav=document.getElementById("GlassmorphismSidenav"),GlassmorphismPname=document.getElementById("GlassmorphismPname"),GlassmorphismTogglericon=document.getElementById("GlassmorphismTogglericon"),GlassmorphismMenuText=document.querySelectorAll(".GlassmorphismMenuText"),GlassmorphismCreateTask=document.getElementById("GlassmorphismCreateTask"),GlassmorphismTaskText=document.getElementById("GlassmorphismTaskText");let GlassmorphismisCollapsed=!1;function GlassmorphismToggle(){GlassmorphismisCollapsed=!GlassmorphismisCollapsed,GlassmorphismSidenav.style.width=GlassmorphismisCollapsed?"70px":"208px",GlassmorphismPname.style.display=GlassmorphismisCollapsed?"none":"block",GlassmorphismMenuText.forEach((e=>{e.style.display=GlassmorphismisCollapsed?"none":"block"})),GlassmorphismTaskText.style.display=GlassmorphismisCollapsed?"none":"flex"}const shoppingDropdownButton=document.getElementById("shoppingDropdownButton"),shoppingDropdownMenu=document.getElementById("shoppingDropdownMenu");shoppingDropdownButton.addEventListener("click",(()=>{shoppingDropdownMenu.classList.toggle("hidden"),shoppingDropdownMenu.classList.toggle("opacity-0"),shoppingDropdownMenu.classList.toggle("scale-95")}));