-})</code></pre><small>Keep in mind that the colors must be set as rgb(a), hex or hsl(a) values as they are used in the inline style.</small></div></div><div class="flex flex-col gap-4"><h4 class="text-lg font-bold">Live Example</h4><div class="flex flex-col gap-4"><div class="flex flex-col gap-2"><p class="text-sm text-neutral-400">Since the demo is already loaded with Alpine.js, the CloakLoading component will behave like a regular loading overlay.<br>In a real application, this would be the first thing that appears when the page starts loading.</p></div><div class="relative h-64 overflow-hidden rounded-md border border-neutral-800 bg-neutral-50/5"><div class="flex h-full flex-col items-center justify-center gap-4 p-8"><p class="text-center text-sm text-neutral-400">The page content will be covered by the cloak loading screen when triggered.</p><div class="flex flex-wrap gap-2" x-data="{ showCloak1: false, showCloak2: false, showCloak3: false }"><template x-if="showCloak1"><div style="display: flex; align-items: center; justify-content: center; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgb(7, 27, 39); z-index: 9999; flex-direction: column; gap: 1rem;" x-init="setTimeout(() => { $el.style.display = 'none'; }, 1000);"><i class="ph-duotone ph-compass-rose" style="font-size: 3rem; color: rgb(250, 250, 250); animation: spin 2s linear infinite;"></i> <span style="font-size: 1rem; color: rgb(250, 250, 250);">Loading...</span></div></template><template x-if="showCloak2"><div style="display: flex; align-items: center; justify-content: center; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgb(30, 58, 138); z-index: 9999; flex-direction: column; gap: 1rem;" x-init="setTimeout(() => { $el.style.display = 'none'; }, 2000);"><i class="ph-duotone ph-circle-notch" style="font-size: 7rem; color: rgb(255, 255, 255); animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;"></i> <span style="font-size: 1.5rem; color: rgb(255, 255, 255);">Please wait...</span></div></template><template x-if="showCloak3"><div style="display: flex; align-items: center; justify-content: center; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgb(6, 78, 59); z-index: 9999; flex-direction: column; gap: 1rem;" x-init="setTimeout(() => { $el.style.display = 'none'; }, 2000);"><i class="ph-duotone ph-hourglass" style="font-size: 5rem; color: rgb(110, 231, 183); animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;"></i> <span style="font-size: 1rem; color: rgb(236, 253, 245);">Almost there...</span></div></template><!-- Button --><div class="group relative w-fit"><button @click="showCloak1 = true; showCloak2 = false; showCloak3 = false; setTimeout(() => showCloak1 = false, 2100)" class="w-fit bg-neutral-50/7.5 hover:bg-neutral-50/10 p-1.5 text-sm gap-0.75 py-2 text-neutral-50 hover:text-neutral-50 rounded justify-center items-center text-center font-bold flex flex-row leading-none transition-all"><i class="ph-bold ph-compass-rose text-base"></i> Show Default </button> </div><!-- Button --><div class="group relative w-fit"><button @click="showCloak2 = true; showCloak1 = false; showCloak3 = false; setTimeout(() => showCloak2 = false, 2100)" class="w-fit bg-primary-600 hover:bg-neutral-50/10 p-1.5 text-sm gap-0.75 py-2 text-neutral-50 hover:text-neutral-50 rounded justify-center items-center text-center font-bold flex flex-row leading-none transition-all"><i class="ph-bold ph-circle-notch text-base"></i> Show Primary </button> </div><!-- Button --><div class="group relative w-fit"><button @click="showCloak3 = true; showCloak1 = false; showCloak2 = false; setTimeout(() => showCloak3 = false, 2100)" class="w-fit bg-emerald-600 hover:bg-neutral-50/10 p-1.5 text-sm gap-0.75 py-2 text-neutral-50 hover:text-neutral-50 rounded justify-center items-center text-center font-bold flex flex-row leading-none transition-all"><i class="ph-bold ph-hourglass text-base"></i> Show Success </button> </div></div></div></div></div></div></div><div class="flex flex-col gap-4"><div class="flex flex-row flex-wrap items-center gap-10"><div class="flex flex-col gap-2"><h3 class="text-xl font-bold">.Sidebar</h3><p class="text-sm text-neutral-400">A sidebar is a vertical navigation component that can contain various types of content.</p></div><div class="flex flex-col gap-2"><a href="https://github.com/goinfinite/ui/blob/main/src/display/sidebar.templ" rel="help" target="_blank" title="View Complete Component Settings"><h4 class="text-lg font-bold text-neutral-50 transition-all hover:opacity-80">Usage <i class="ph-bold ph-arrow-square-out text-sm text-neutral-400"></i></h4></a><pre class="rounded-md bg-neutral-800 p-4 text-xs text-wrap tab-2"><code>@uiDisplay.Sidebar(uiDisplay.SidebarSettings{
0 commit comments