<script lang="ts">
	import { page } from '$app/stores';
	import { onMount } from 'svelte';

	const routes = [
		{ path: '/', label: 'Notes', icon: '📝' },
		{ path: '/feeds', label: 'Feeds', icon: '📰' },
		{ path: '/readlist', label: 'Read Later', icon: '📚' }
	];

	let currentPath = $derived($page.url.pathname);
	let isMobile = $state(false);

	function checkMobile() {
		isMobile = window.innerWidth < 768;
	}

	onMount(() => {
		checkMobile();
	});
</script>

<svelte:window onresize={checkMobile} />

{#if isMobile}
	<nav class="navbar is-fixed-bottom p-0">
		<div class="navbar-brand is-justify-content-space-around is-flex-grow-1">
			{#each routes as route}
				<a
					href={route.path}
					class="navbar-item has-text-centered"
					class:is-active={currentPath === route.path}
				>
					<div>
						<span class="icon">{route.icon}</span>
						<p class="is-size-7">{route.label}</p>
					</div>
				</a>
			{/each}
		</div>
	</nav>
{:else}
	<nav class="menu p-4 is-fixed-left">
		{#each routes as route}
			<a
				href={route.path}
				class="button is-fullwidth mb-2 is-justify-content-start"
				class:is-light={currentPath === route.path}
			>
				<span class="icon">{route.icon}</span>
				<span>{route.label}</span>
			</a>
		{/each}
	</nav>
{/if}

<style>
	.is-fixed-left {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		width: 200px;
		background: inherit;
		box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
	}

	@media (max-width: 768px) {
		:global(body) {
			padding-bottom: 60px;
		}
	}

	@media (min-width: 769px) {
		:global(body) {
			padding-left: 200px;
		}
	}
</style>
