page-toolbar.svelte (1726B)
1 <script lang="ts"> 2 import { goto } from "$app/navigation"; 3 import { app_lo } from "$lib/stores/app"; 4 import type { IPageToolbar } from "$lib/types/components/lib"; 5 import { type IBasisOpt, Glyph } from "@radroots/apps-lib"; 6 import type { Snippet } from "svelte"; 7 import LogoCircleSm from "../lib/logo-circle-sm.svelte"; 8 import LogoLetters from "../lib/logo-letters.svelte"; 9 import PageHeader from "./page-header.svelte"; 10 11 let { 12 basis = undefined, 13 header_option, 14 }: { 15 basis?: IBasisOpt<IPageToolbar<string>>; 16 header_option?: Snippet; 17 } = $props(); 18 </script> 19 20 <div 21 class={`flex flex-row min-h-nav_page_toolbar_${$app_lo} h-nav_page_toolbar_${$app_lo} w-full px-6 justify-between items-end`} 22 > 23 <div class={`flex flex-row w-full justify-between items-center`}> 24 <button 25 class={`flex flex-row gap-2 justify-start items-center`} 26 onclick={async () => { 27 if (basis?.callback) await basis.callback(); 28 else await goto(`/`); 29 }} 30 > 31 <LogoCircleSm /> 32 <LogoLetters /> 33 </button> 34 <button 35 class={`flex flex-row justify-center items-center`} 36 onclick={async () => { 37 await goto(`/settings`); 38 }} 39 > 40 <Glyph 41 basis={{ 42 classes: `text-ly0-gl`, 43 dim: `lg`, 44 45 key: `gear`, 46 }} 47 /> 48 </button> 49 </div> 50 </div> 51 {#if basis?.header} 52 <PageHeader basis={basis.header}> 53 {#if header_option} 54 {@render header_option()} 55 {/if} 56 </PageHeader> 57 {/if}