nav.svelte (5268B)
1 <script lang="ts"> 2 import DropdownNested from "$lib/components/dropdown-nested.svelte"; 3 import { nostr_session } from "$lib/stores/lib"; 4 import { locale, ls } from "$lib/utils/i18n"; 5 import { localise_auth_route } from "$lib/utils/routes/gen.tmp"; 6 import { type CallbackPromise } from "@radroots/utils"; 7 import NavSearch from "./nav-search.svelte"; 8 import NavSimple from "./nav-simple.svelte"; 9 10 const logout = async (): Promise<void> => { 11 //nostr_session.set(null); 12 // location.reload(); 13 }; 14 </script> 15 16 <NavSimple> 17 <div class={`flex flex-col justify-center items-center`}> 18 <div 19 class={`relative hidden desktop:flex flex-col h-[27px] w-[180px] justify-center items-center -translate-y-1`} 20 > 21 <NavSearch /> 22 {#if $nostr_session?.user} 23 <div 24 class={`absolute -bottom-[1rem] flex flex-row w-full justify-start items-center`} 25 > 26 <DropdownNested> 27 {#snippet primary()} 28 <p 29 class={`font-sans font-[400] text-xs text-layer-0-glyph line-clamp-1 overflow-hidden break-all hover:opacity-80`} 30 > 31 {#if $nostr_session.profile?.nip05} 32 {`logged in as ${$nostr_session.profile.nip05}`} 33 {:else} 34 {`logged in as ${$nostr_session.user?.npub}`} 35 {/if} 36 </p> 37 {/snippet} 38 {#snippet dropdown()} 39 <div 40 class={`flex flex-col w-full py-2 justify-center items-center`} 41 > 42 <div 43 class={`flex flex-row w-full justify-center items-center`} 44 > 45 <p 46 class={`font-br font-[400] text-xs text-layer-0-glyph text-center`} 47 > 48 {`You are logged in via Nostr extension`} 49 </p> 50 </div> 51 </div> 52 {#snippet anchor(href: string, label: string)} 53 <a 54 {href} 55 class={`flex flex-row w-full h-6 justify-center items-center hover:bg-gray-100`} 56 > 57 <p 58 class={`font-rsfd font-[400] text-xs text-layer-0-glyph capitalize`} 59 > 60 {label} 61 </p> 62 </a> 63 {/snippet} 64 {@render anchor( 65 `/profile`, //@todo 66 `${$ls(`web.common.view_profile`)}`, 67 )} 68 {@render anchor( 69 `/`, //@todo 70 `${$ls(`web.common.settings`)}`, 71 )} 72 {/snippet} 73 </DropdownNested> 74 </div> 75 {:else} 76 <div 77 class={`absolute -bottom-[1rem] flex flex-row w-full justify-start items-center`} 78 > 79 <a 80 href={`${localise_auth_route($locale, `login`)}`} 81 class={`flex flex-row pl-1 justify-center items-center hover:opacity-40`} 82 > 83 <p 84 class={`font-br font-[400] text-[11px] text-black_panther/80 `} 85 > 86 {`${$ls(`web.nav.login.label`)}!!`} 87 </p> 88 </a> 89 </div> 90 {/if} 91 </div> 92 <div class={`desktop:hidden flex flex-row justify-start items-center`}> 93 {#snippet button(label: string, callback: CallbackPromise)} 94 <button 95 class={`flex flex-row w-full h-6 px-4 justify-center items-center bg-lime-500 hover:bg-lime-400 rounded-sm`} 96 onclick={async () => { 97 await callback(); 98 }} 99 > 100 <p 101 class={`font-br font-[700] text-xs text-white -translate-y-[1px]`} 102 > 103 {label} 104 </p> 105 </button> 106 {/snippet} 107 {#if $nostr_session?.user} 108 {@render button(`${$ls(`common.profile`)}`, async () => { 109 // 110 })} 111 {:else} 112 {@render button(`${$ls(`common.log_in`)}`, async () => { 113 await logout(); 114 })} 115 {/if} 116 </div> 117 </div> 118 </NavSimple>