coinos-server.git - coinos server — legacy coinos.io backend (Lightning, on-chain, Liquid)

about summary refs log tree commit diff stats

diff options

Diffstat (limited to 'public/css/report.less')

0 files changed, 0 insertions, 0 deletions

ef='#n30'>30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96

<script>
  import { run } from "svelte/legacy";

  import { banner, theme, newPayment } from "$lib/store";
  import { goto } from "$app/navigation";
  import Avatar from "$comp/Avatar.svelte";
  import Menu from "$comp/Menu.svelte";
  import { loading, t } from "$lib/translations";
  import { page } from "$app/stores";

  let { user, subject = $bindable() } = $props();

  let w = $state();
  $effect(() => (subject = subject || user));

  let bg = $derived(
    $banner?.id && $banner.id === subject.id
      ? `url(${$banner.src})`
      : subject?.banner
        ? subject.banner.includes(":")
          ? `url(${subject.banner})`
          : `url(/api/public/${subject.banner}.webp)`
        : undefined,
  );

  const links = [
    {
      href: `/${user?.username}`,
      icon: "ph:house-bold",
    },
    {
      href: `/${user?.username}/receive`,
      icon: "ph:hand-coins-bold",
      flip: "horizontal",
    },
    {
      href: `/payments`,
      icon: "ph:clock-bold",
    },
    {
      href: `/send`,
      icon: "ph:paper-plane-right-bold",
    },
  ];

  let opacity = $derived((href) =>
    $page.url.pathname === href
      ? "opacity-100"
      : "opacity-90 hover:opacity-none",
  );
</script>

<svelte:window bind:innerWidth={w} />

{#if !$loading}
  <header
    class="bg-gradient-to-r bg-primary bg-accent h-[175px] w-full relative bg-cover mb-20"
    style:background-image={bg}
  >
    <nav class="flex justify-end items-center space-x-4 p-5">
      {#if user}
        {#each links as { href, icon, flip }}
          <a {href} data-sveltekit-preload-code="eager">
            <button class="btn-menu {opacity(href)}">
              <iconify-icon {icon} width={w > 640 ? 32 : 24} {flip}
              ></iconify-icon>
            </button>
          </a>
        {/each}
        <Menu {opacity} {user} t={$t} {w} />
      {:else}
        <a href={`/login?redirect=${$page.url.pathname}`}>
          <button class="btn !rounded-full">{$t("nav.signIn")}</button>
        </a>
      {/if}
    </nav>
    {#if subject}
      <div
        class="absolute md:w-[64px] md:mx-auto lg:left-[154px] xl:left-[194px] left-[calc(50vw-64px)] -bottom-[64px] z-30"
      >
        <Avatar user={subject} />
      </div>
    {/if}
  </header>
{/if}

<style>
  .btn-menu {
    @apply flex justify-center items-center bg-base-100 p-2 rounded-full w-12 h-12 sm:w-16 sm:h-16 drop-shadow-xl;
  }

  header {
    z-index: 50;
    view-transition-name: header;
  }
</style>


context:
space:
mode: