mirror of
https://github.com/ThaUnknown/miru.git
synced 2026-04-22 05:11:56 +00:00
82 lines
2.9 KiB
Svelte
82 lines
2.9 KiB
Svelte
<script lang='ts'>
|
|
import { Home, Search, Calendar, Users, MessagesSquare, Heart, Settings, LogIn } from 'lucide-svelte'
|
|
import { Download } from 'svelte-radix'
|
|
|
|
import { BannerImage } from '../banner'
|
|
import { Button } from '../button'
|
|
|
|
import SidebarButton from './SidebarButton.svelte'
|
|
|
|
import native from '$lib/modules/native'
|
|
import client from '$lib/modules/auth/client'
|
|
import * as Avatar from '$lib/components/ui/avatar'
|
|
import { lockedState, idleState, activityState } from '$lib/modules/idle'
|
|
import { page } from '$app/stores'
|
|
import Logo from '$lib/components/icons/Logo.svelte'
|
|
|
|
const auth = client.hasAuth
|
|
|
|
$: hasAuth = $auth
|
|
|
|
let visibilityState: DocumentVisibilityState
|
|
|
|
$: active = ($lockedState === 'locked' || visibilityState === 'hidden' || ($idleState === 'active' && $activityState === 'active')) && $page.route.id !== '/app/player'
|
|
</script>
|
|
|
|
<svelte:document bind:visibilityState />
|
|
|
|
<BannerImage class='absolute top-0 left-0 w-14 -z-10 hidden md:block' />
|
|
<Logo class='mb-3 h-10 object-contain px-2 hidden md:block text-white' />
|
|
<SidebarButton href='/app/home/'>
|
|
<Home size={18} />
|
|
</SidebarButton>
|
|
<SidebarButton href='/app/search/'>
|
|
<Search size={18} />
|
|
</SidebarButton>
|
|
<SidebarButton href='/app/schedule/'>
|
|
<Calendar size={18} />
|
|
</SidebarButton>
|
|
<!-- <SidebarButton href='/app/w2g/'> -->
|
|
<SidebarButton disabled={true}>
|
|
<Users size={18} />
|
|
</SidebarButton>
|
|
<SidebarButton href='/app/chat/'>
|
|
<MessagesSquare size={18} />
|
|
</SidebarButton>
|
|
<SidebarButton href='/app/client/'>
|
|
<Download size={18} />
|
|
</SidebarButton>
|
|
<Button variant='ghost' on:click={() => native.openURL('https://github.com/sponsors/ThaUnknown/')} class='px-2 w-full relative mt-auto select:!bg-transparent text-[#fa68b6] select:text-[#fa68b6]'>
|
|
<Heart size={18} fill='currentColor' class='absolute' />
|
|
<Heart size={18} fill='currentColor' class={active ? 'donate' : 'hidden'} />
|
|
</Button>
|
|
<SidebarButton href='/app/settings/'>
|
|
<Settings size={18} />
|
|
</SidebarButton>
|
|
<SidebarButton href='/app/profile/' class='hidden md:block'>
|
|
{#if hasAuth}
|
|
{@const viewer = client.profile()}
|
|
<Avatar.Root class='size-6 rounded-md'>
|
|
<Avatar.Image src={viewer?.avatar?.medium ?? ''} alt={viewer?.name} />
|
|
<Avatar.Fallback>{viewer?.name}</Avatar.Fallback>
|
|
</Avatar.Root>
|
|
{:else}
|
|
<LogIn size={18} />
|
|
{/if}
|
|
</SidebarButton>
|
|
|
|
<style>
|
|
:global(.donate) {
|
|
filter: drop-shadow(0 0 1rem #fa68b6);
|
|
animation: glow 1s ease-in-out infinite alternate;
|
|
}
|
|
|
|
@keyframes glow {
|
|
from {
|
|
transform: translate3d(var(--tw-translate-x), var(--tw-translate-y), 0) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(1) scaleY(1);
|
|
}
|
|
to {
|
|
transform: translate3d(var(--tw-translate-x), var(--tw-translate-y), 0) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(0.5) scaleY(0.5);
|
|
}
|
|
}
|
|
</style>
|