page-header.svelte (1748B)
1 <script lang="ts"> 2 import { app_lo, ph_blur } from "$lib/stores/app"; 3 import type { IPageHeader } from "$lib/types/components/lib"; 4 import { callback_route, Flex } from "@radroots/apps-lib"; 5 import type { Snippet } from "svelte"; 6 import { fade } from "svelte/transition"; 7 8 let { 9 basis, 10 children, 11 }: { 12 basis: IPageHeader<string>; 13 children?: Snippet; 14 } = $props(); 15 </script> 16 17 {#if $ph_blur} 18 <div 19 in:fade={{ duration: 50 }} 20 out:fade={{ delay: 50, duration: 200 }} 21 class={`z-20 fixed top-0 left-0 flex flex-row h-nav_page_header_${$app_lo} w-full justify-center items-center bg-ly0-blur/30 backdrop-blur-lg`} 22 > 23 <Flex /> 24 </div> 25 {/if} 26 <div 27 class={`z-20 sticky top-0 flex flex-row min-h-nav_page_header_${$app_lo} h-nav_page_header_${$app_lo} w-full px-6 justify-between items-center`} 28 > 29 <div class={`flex flex-row justify-start items-center`}> 30 <button 31 class={`flex flex-row justify-center items-center`} 32 onclick={async () => { 33 if (basis.callback_route) 34 await callback_route(basis.callback_route); 35 }} 36 > 37 <p 38 class={`font-sansd font-[700] text-2xl text-ly0-gl capitalize max-w-lo_${$app_lo} truncate`} 39 > 40 {basis.label || ``} 41 </p> 42 </button> 43 </div> 44 {#if children} 45 {#if !$ph_blur} 46 <div 47 in:fade={{ duration: 50 }} 48 out:fade={{ delay: 50, duration: 200 }} 49 class={`flex flex-row justify-center items-center`} 50 > 51 {@render children()} 52 </div> 53 {/if} 54 {/if} 55 </div>