Merge pull request #274 from dtonon/feature/adjust-bottom-bar

Adjust bottom bar
This commit is contained in:
hodlbod 2024-02-12 11:07:16 -08:00 committed by GitHub
commit 45174f8dab
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -85,24 +85,32 @@
{#if innerWidth < 1024}
<div
class="fixed bottom-0 left-0 right-0 z-nav flex items-center justify-between border-t border-solid border-mid bg-dark px-4 py-2">
<div
class="h-10 w-10 cursor-pointer rounded-full border-2 border-solid border-warm p-1 pl-3 pt-2 text-accent"
on:click={openSearch}>
<i class="fa fa-search scale-150" />
<div class="w-1/3">
<div
class="h-10 w-10 cursor-pointer rounded-full border-[3px] border-solid border-warm p-1 pl-2.5 pt-1.5 text-accent"
on:click={openSearch}>
<i class="fa fa-search scale-[140%]" />
</div>
</div>
<div class="">
{#if $pubkey}
<Anchor button accent on:click={createNote}>Post +</Anchor>
{:else}
<Anchor modal button accent href="/login">Log In</Anchor>
{/if}
<div class="flex cursor-pointer items-center" on:click={openMenu}>
<i class="fa fa-bars fa-2xl" />
{#if $pubkey}
<PersonCircle class="-ml-2 h-12 w-12 border-4 !border-dark" pubkey={$pubkey} />
{#if $hasNewNotifications || $hasNewMessages}
<div class="absolute right-4 top-4 h-2 w-2 rounded bg-accent" />
</div>
<div class="flex w-1/3 justify-end">
<div class="flex cursor-pointer items-center" on:click={openMenu}>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill="currentColor" class="pt-1" width="36" height="36">
<path fill="currentColor" d="M0 88C0 74.7 10.7 64 24 64H424c13.3 0 24 10.7 24 24s-10.7 24-24 24H24C10.7 112 0 101.3 0 88zM0 248c0-13.3 10.7-24 24-24H424c13.3 0 24 10.7 24 24s-10.7 24-24 24H24c-13.3 0-24-10.7-24-24zM448 408c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24s10.7-24 24-24H424c13.3 0 24 10.7 24 24z"/>
</svg>
{#if $pubkey}
<PersonCircle class="-ml-4 h-12 w-12 border-4 !border-dark" pubkey={$pubkey} />
{#if $hasNewNotifications || $hasNewMessages}
<div class="absolute right-4 top-4 h-2 w-2 rounded bg-accent" />
{/if}
{/if}
{/if}
</div>
</div>
</div>
{/if}