aboutsummaryrefslogtreecommitdiffstats
path: root/src/lib
diff options
context:
space:
mode:
authorAdam Soltys <asoltys@gmail.com>2022-11-08 14:28:22 -0800
committerAdam Soltys <asoltys@gmail.com>2022-11-08 14:28:22 -0800
commit4b15454e4b37e212a646d5b85fea7ae8eab374e2 (patch)
treecc4b9b7bcb9c66c1e4451b658350971a00319181 /src/lib
parent28edb9a193263697fce8bba0fbad9165f762c534 (diff)
downloadcoinos-ui-4b15454e4b37e212a646d5b85fea7ae8eab374e2.tar.gz
coinos-ui-4b15454e4b37e212a646d5b85fea7ae8eab374e2.zip
more qr tweaking
Diffstat (limited to 'src/lib')
0 files changed, 0 insertions, 0 deletions
generated by cgit v1.2.3 (git 2.51.0) at 2026-10-17 18:34:06 +0000
' href='#n103'>103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 
<script>
  import OutClick from "svelte-outclick";
  import { banner, newPayment } from "$lib/store";
  import { goto } from "$app/navigation";
  import Avatar from "$comp/Avatar.svelte";
  import Icon from "$comp/Icon.svelte";
  import { loading, t } from "$lib/translations";
  import { page } from "$app/stores";

  export let user, subject;

  $: if (!subject) subject = user;

  let menuButtons;
  $: if (user)
    menuButtons = [
      {
        key: "nav.settings",
        icon: "settings",
        href: `/settings`,
      },
      { key: "nav.support", icon: "support", href: `/support` },
      { key: "nav.map", icon: "map", href: `/map` },
      // {
      //   key: "nav.messages",
      //   icon: "message",
      //   href: `/messages`,
      // },
      { key: "nav.merch", icon: "shop", href: `https://coinosmerch.com` },
      { key: "nav.signOut", icon: "logout", href: `/logout` },
    ];

  let showMenu = false;

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

  $: $page && (showMenu = false);
</script>

{#if !$loading}
  <header
    class="bg-gradient-to-r from-primary to-gradient 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}
        <a href={`/${user.username}`}>
          <button
            class="bg-white p-2 rounded-full w-12 h-12 sm:w-16 sm:h-16 drop-shadow-xl border border-black/10 {$page
              .url.pathname === `/${user.username}`
              ? 'opacity-100'
              : 'opacity-70 hover:opacity-80'}"
            ><Icon icon="home" style="mx-auto w-6 sm:w-8" />
          </button>
        </a>
        <a href={`/invoice`}>
          <button
            class="bg-white p-2 rounded-full w-12 h-12 sm:w-16 sm:h-16 drop-shadow-xl border border-black/10 {$page.url.pathname.includes(
              'invoice'
            )
              ? 'opacity-100'
              : 'opacity-70 hover:opacity-80'}"
            ><Icon icon="receive" style="mx-auto w-6 sm:w-8" />
          </button>
        </a>
        <a href={`/payments`}>
          <button
            class="bg-white p-2 rounded-full w-12 h-12 sm:w-16 sm:h-16 drop-shadow-xl border border-black/10 {$page
              .url.pathname === `/payments`
              ? 'opacity-100'
              : 'opacity-70 hover:opacity-80'} relative"
            ><Icon icon="clock" style="mx-auto w-6 sm:w-8" />
            {#if $newPayment}
              <span class="absolute top-0 right-0">
                <span class="flex h-3 w-3">
                  <span
                    class="animate-ping absolute inline-flex h-full w-full rounded-full bg-[#F7931A] opacity-75"
                  />
                  <span
                    class="relative inline-flex rounded-full h-3 w-3 bg-[#F7931A]"
                  />
                </span>
              </span>
            {/if}
          </button>
        </a>
        <a href={`/send`}>
          <button
            class="bg-white p-2 rounded-full w-12 h-12 sm:w-16 sm:h-16 drop-shadow-xl border border-black/10 {$page
              .url.pathname === `/send`
              ? 'opacity-100'
              : 'opacity-70 hover:opacity-80'}"
            ><Icon icon="send" style="mx-auto w-6 sm:w-8" />
          </button>
        </a>
        <div class="relative">
          <OutClick on:outclick={() => (showMenu = false)}>
            <button
              class="bg-white p-2 rounded-full w-12 h-12 sm:w-16 sm:h-16 drop-shadow-xl border border-black/10 {$page
                .url.pathname === `/settings` ||
              $page.url.pathname === `/support`
                ? 'opacity-100'
                : `opacity-70 hover:opacity-80 ${
                    showMenu ? 'opacity-80' : ''
                  }`}"
              on:click={() => (showMenu = !showMenu)}
              ><Icon icon="menu" style="mx-auto w-6 sm:w-8" />
            </button>

            <div
              class="{showMenu
                ? 'block'
                : 'hidden'} absolute top-14 right-0 bg-white rounded-3xl p-8 shadow-xl z-50"
            >
              <ul class="space-y-5 w-48">
                {#each menuButtons as { href, icon, key }}
                  <li>
                    <a {href} data-sveltekit-prefetch="off">
                      <button
                        class="flex justify-center items-center font-semibold hover:opacity-80"
                        ><Icon {icon} style="mr-2 w-6 sm:w-8" /> {$t(key)}
                      </button>
                    </a>
                  </li>
                {/each}
              </ul>
              <hr class="my-4" />
              <a href="/?stay=true"
                ><img src="/images/logo.svg" alt="Coinos" class="w-32" /></a
              >
            </div>
          </OutClick>
        </div>
      {:else}
        <a href={`/login?redirect=${$page.url.pathname}`}>
          <button class="bg-white px-5 py-2 rounded-xl font-semibold text-sm"
            >{$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>
  header {
    z-index: 50;
    view-transition-name: header;
  }
</style>
generated by cgit v1.2.3 (git 2.51.0) at 2026-10-17 18:34:06 +0000