FloatingSidebar.svelte

<script lang="ts">
	import { goto } from '$app/navigation'
	import { page } from '$app/stores'
	import { sineIn } from 'svelte/easing'
	import { Button, Drawer } from 'flowbite-svelte'
	import { ChevronRightOutline } from 'flowbite-svelte-icons'
	import { getCurrentUserStore } from '$lib/core/application/service/store/user.api.store'
	import { globalStore } from '$lib/core/application/service/store/global.store'

	export let innerWidth: number

	const items = [
		{
			icon: '/icons/star.svg',
			name: 'New Rounds',
			url: '/'
		},
		{
			icon: '/icons/flame.svg',
			name: 'Trending Rounds',
			url: '/trending-rounds'
		},
		{
			icon: '/icons/leaf.svg',
			name: 'Seed Rounds',
			url: '/seed-rounds'
		},
		{
			icon: '/icons/money.svg',
			name: 'Money Rounds',
			url: '/money-rounds'
		},
		{
			icon: '/icons/token.svg',
			name: 'Token Rounds',
			url: '/token-rounds'
		},
		{
			icon: '/icons/time-fast.svg',
			name: 'Fastest Finger',
			url: '/fastest-finger'
		}
	]

	let isFloatingSidebarHidden: boolean = innerWidth <= 1280
	let transitionParams = {
		x: -320,
		duration: 200,
		easing: sineIn
	}

	$: activePage = $page.route.id
	$: isActivePage = (page: string) => activePage === page
	// update sidebar visibility when screen size changes
	$: if (innerWidth <= 1280) {
		isFloatingSidebarHidden = true
	} else {
		isFloatingSidebarHidden = false
	}

	/**
	 * Handle navigation and close floating sidebar on mobile view
	 *
	 * @param url
	 */
	function handleNavigate(url: string) {
		goto(url)
		if (innerWidth <= 1280) {
			isFloatingSidebarHidden = true
		}
	}
</script>

<section class="relative">
	{#if innerWidth <= 1280}
		<Button
			class="sticky top-[115px] p-0 outline-none focus:!ring-0"
			on:click={() => {
				isFloatingSidebarHidden = false
			}}
		>
			<div
				class="rounded-br-[20px] rounded-tr-[20px] bg-[linear-gradient(128.81deg,_#A600FF_-7.74%,_#281648_33.51%)] p-[1px]"
			>
				<div
					class="rounded-br-[20px] rounded-tr-[20px] bg-[linear-gradient(125.28deg,_rgba(12,_1,_28,_0.7)_38.52%,_rgba(166,_0,_255,_0.7)_216.47%)] px-2 py-7"
				>
					<ChevronRightOutline color="white" size="lg" />
				</div>
			</div>
		</Button>
	{/if}
</section>

<Drawer
	transitionType="fly"
	{transitionParams}
	bind:hidden={isFloatingSidebarHidden}
	activateClickOutside={innerWidth <= 1280}
	backdrop={false}
	divClass="bg-none z-50 !w-auto{innerWidth <= 1280 ? 'sticky pl-5' : '!sticky'}"
>
	<div class="floating-sidebar {innerWidth <= 1280 ? 'fixed' : 'sticky'}">
		<div class="floating-sidebar-content">
			<div>
				{#each items as item}
					<Button
						class="flex w-full flex-col items-center justify-center gap-1 rounded-none py-6 !ring-0 {isActivePage(
							item.url
						)
							? 'floating-sidebar-active-page opacity-100'
							: 'opacity-50'}"
						on:click={() => {
							handleNavigate(item.url)
						}}
					>
						<img src={item.icon} alt={item.name} />
						<span class="text-sm leading-[18px]">{item.name}</span>
					</Button>
				{/each}
			</div>
			{#if !$getCurrentUserStore.response.data.walletAddress && !$globalStore.isLoggingIn}
				<div>
					<Button
						class="flex w-full flex-col items-center justify-center gap-1 opacity-50 !ring-0"
						on:click={() => {
							$globalStore.showLoginModal = true
							$globalStore.openMagicModal = true
						}}
					>
						<img src="/icons/sign-in.svg" alt="Sign in icon" />
						<span class="text-sm leading-[18px]">Log in</span>
					</Button>
				</div>
			{/if}
		</div>
	</div>
</Drawer>