nav-simple.svelte (1618B)
1 <script lang="ts"> 2 import { goto } from "$app/navigation"; 3 import { page } from "$app/state"; 4 import { home_menu_visible } from "$lib/stores/lib"; 5 import { locale, ls } from "$lib/utils/i18n"; 6 import { root_symbol } from "@radroots/utils"; 7 import type { Snippet } from "svelte"; 8 9 let { children }: { children: Snippet } = $props(); 10 </script> 11 12 <div 13 class={`flex flex-row h-[45px] desktop:h-[4.25rem] w-full px-4 desktop:px-12 justify-between items-center bg-white/80 border-b-2 border-b-gray-200`} 14 > 15 <div class={`flex flex-row gap-4 justify-start items-center`}> 16 <button 17 class={`flex flex-row justify-center items-center`} 18 onclick={async () => { 19 if (page.url.pathname === `/`) home_menu_visible.toggle(); 20 else await goto(`/`); 21 }} 22 > 23 <p 24 class={`font-sans font-[700] text-cloak_grey text-3xl tracking-tightest`} 25 > 26 {root_symbol} 27 </p> 28 </button> 29 <button 30 class={`flex flex-row justify-center items-center`} 31 onclick={async () => { 32 if (page.url.pathname === `/`) 33 locale.set($locale === `en` ? `es` : `en`); 34 else await goto(`/`); 35 }} 36 > 37 <p 38 class={`font-br font-[700] text-cloak_grey text-lg desktop:text-2xl max-desktop:-translate-y-[1px]`} 39 > 40 {`${$ls(`web.nav.label`, { default: "rad roots" })}`} 41 </p> 42 </button> 43 </div> 44 {@render children()} 45 </div>