linkylinky-dashboard/src/lib/Sidebar.svelte

<script>
	import UserStore from '$lib/UserStore';
	import { onDestroy } from 'svelte';
	import Apiclient from './Apiclient';
	import { page } from '$app/stores';
	import SidebarEntry from './SidebarEntry.svelte';

	$: logged_in = false;
	$: currentPage = $page.url.pathname;

	const unsubscribe = UserStore.subscribe((value) => {
		logged_in = value.isLoggedIn;
	});

	onDestroy(unsubscribe);

	async function logout() {
		await Apiclient.logout().catch((e) => {});
		UserStore.logout();
	}
</script>

<div
	class="flex flex-col w-64 h-screen px-4 py-8 bg-white border-r dark:bg-gray-800 dark:border-gray-600"
>
	<img class="h-36 w-36" src="/icon_128.png" alt="LinkyLinky Logo (White kauft.es K on red background)">
	<h2 class="text-3xl font-semibold text-gray-800 dark:text-white">LinkyLinky</h2>
	<!-- <div class="relative mt-6">
		<span class="absolute inset-y-0 left-0 flex items-center pl-3">
			<svg class="w-5 h-5 text-gray-400" viewBox="0 0 24 24" fill="none">
				<path
					d="M21 21L15 15M17 10C17 13.866 13.866 17 10 17C6.13401 17 3 13.866 3 10C3 6.13401 6.13401 3 10 3C13.866 3 17 6.13401 17 10Z"
					stroke="currentColor"
					stroke-width="2"
					stroke-linecap="round"
					stroke-linejoin="round"
				/>
			</svg>
		</span>

		<input
			type="text"
			class="w-full py-3 pl-10 pr-4 text-gray-700 bg-white border border-gray-300 rounded-md dark:bg-gray-800 dark:text-gray-300 dark:border-gray-600 focus:border-blue-500 dark:focus:border-blue-500 focus:outline-none focus:ring"
			placeholder="Search"
		/>
	</div> -->

	<div class="flex flex-col justify-between flex-1 mt-6">
		<nav>
			<SidebarEntry title="Dashboard" href="" pageUrl="/" bind:currentPage>
				<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
					<path
						d="M19 11H5M19 11C20.1046 11 21 11.8954 21 13V19C21 20.1046 20.1046 21 19 21H5C3.89543 21 3 20.1046 3 19V13C3 11.8954 3.89543 11 5 11M19 11V9C19 7.89543 18.1046 7 17 7M5 11V9C5 7.89543 5.89543 7 7 7M7 7V5C7 3.89543 7.89543 3 9 3H15C16.1046 3 17 3.89543 17 5V7M7 7H17"
						stroke="currentColor"
						stroke-width="2"
						stroke-linecap="round"
						stroke-linejoin="round"
					/>
				</svg>
			</SidebarEntry>

			<hr class="my-6 dark:border-gray-600" />

			{#if logged_in}
				<SidebarEntry title="Manage Links" href="/links" pageUrl="/links" bind:currentPage>
					<svg
						xmlns="http://www.w3.org/2000/svg"
						class="h-5 w-5"
						fill="none"
						viewBox="0 0 24 24"
						stroke="currentColor"
					>
						<path
							stroke-linecap="round"
							stroke-linejoin="round"
							stroke-width="2"
							d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"
						/>
					</svg>
				</SidebarEntry>
				<SidebarEntry title="All visits" href="/visits" pageUrl="/visits" bind:currentPage>
					<svg
						xmlns="http://www.w3.org/2000/svg"
						class="h-5 w-5"
						fill="none"
						viewBox="0 0 24 24"
						stroke="currentColor"
					>
						<path
							stroke-linecap="round"
							stroke-linejoin="round"
							stroke-width="2"
							d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
						/>
						<path
							stroke-linecap="round"
							stroke-linejoin="round"
							stroke-width="2"
							d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
						/>
					</svg>
				</SidebarEntry>
				<button
					class="flex items-center px-4 py-2 mt-5 transition-colors duration-200 transform rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 dark:hover:text-gray-200 hover:text-gray-700 text-gray-600 dark:text-gray-400"
					on:click={logout}
				>
					<svg
						xmlns="http://www.w3.org/2000/svg"
						class="h-5 w-5"
						fill="none"
						viewBox="0 0 24 24"
						stroke="currentColor"
					>
						<path
							stroke-linecap="round"
							stroke-linejoin="round"
							stroke-width="2"
							d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
						/>
					</svg>

					<span class="mx-4 font-medium">Logout</span>
				</button>
			{:else}
				<SidebarEntry title="Login" href="/login" pageUrl="/login" bind:currentPage>
					<svg
						xmlns="http://www.w3.org/2000/svg"
						class="h-5 w-5"
						fill="none"
						viewBox="0 0 24 24"
						stroke="currentColor"
					>
						<path
							stroke-linecap="round"
							stroke-linejoin="round"
							stroke-width="2"
							d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"
						/>
					</svg>
				</SidebarEntry>
			{/if}
		</nav>

		{#if logged_in}
			<div class="flex items-center px-4 -mx-2">
				<img
					class="object-cover mx-2 rounded-full h-9 w-9"
					src="https://images.unsplash.com/photo-1531427186611-ecfd6d936c79?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=634&q=80"
					alt="avatar"
				/>
				<h4 class="mx-2 font-medium text-gray-800 dark:text-gray-200 hover:underline">
					Username here
				</h4>
			</div>
		{/if}
	</div>
</div>