peer-at-code-web/src/lib/components/Sidenav.svelte

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

	import { cn } from '$lib/Utils';

	import Badge from '$lib/components/Icons/Badge.svelte';
	import Code from '$lib/components/Icons/Code.svelte';
	import Dashboard from '$lib/components/Icons/Dashboard.svelte';
	import Leaderboard from '$lib/components/Icons/Leaderboard.svelte';
	import Settings from '$lib/components/Icons/Settings.svelte';
	import Discord from './Icons/Discord.svelte';
	import Git from './Icons/Git.svelte';
	import Help from './Icons/Help.svelte';
	import Mail from './Icons/Mail.svelte';

	$: path = $page.url.pathname;
	$: isActive = (slug: string) => path === slug;

	export let isOpen: boolean;

	const navItems = [
		{
			name: 'Dashboard',
			slug: '/dashboard',
			icon: Dashboard
		},
		{
			name: 'Classement',
			slug: '/dashboard/leaderboard',
			icon: Leaderboard
		},
		{
			name: 'Chapitres',
			slug: '/dashboard/chapters',
			icon: Code
		},
		{
			name: 'Badges',
			slug: '/dashboard/badges',
			icon: Badge
		},
		{
			name: 'Paramètres',
			slug: '/dashboard/settings',
			icon: Settings
		}
	];
</script>

<aside
	class={cn(
		'absolute z-10 h-screen w-28 border-r border-highlight-primary bg-gradient-to-b from-primary-800 to-primary-900 shadow-md transition-all duration-300 ease-in-out sm:relative sm:flex sm:flex-col lg:w-60',
		{
			'bottom-0 -translate-x-full sm:translate-x-0': !isOpen,
			'bottom-0 w-full sm:w-28': isOpen
		}
	)}
>
	<div class="flex h-full flex-col">
		<div class="flex w-full justify-center p-[8.5px]">
			<img
				src="/assets/brand/peerat.png"
				alt="Logo"
				width="50"
				height="50"
				loading="eager"
				draggable="false"
			/>
		</div>
		<div class="px-4">
			<hr class="border-highlight-primary" />
		</div>
		<div class="px-4 pt-4">
			<ul class="flex flex-col gap-4">
				{#each navItems as item}
					<li>
						<a
							on:click={() => {
								isOpen = false;
							}}
							href={item.slug}
							class={cn(
								'flex justify-center rounded-md px-3 py-3 text-sm transition-colors duration-150 lg:justify-start',
								{
									'bg-primary-700': isActive(item.slug),
									'group hover:bg-primary-700': !isActive(item.slug)
								}
							)}
						>
							<div class="flex items-center gap-2">
								<svelte:component
									this={item.icon}
									class={cn({
										'stroke-highlight-secondary transition-colors duration-150 group-hover:stroke-primary-0':
											!isActive(item.slug)
									})}
								/>
								<span
									class={cn('hidden lg:block', {
										'block sm:hidden': isOpen,
										hidden: !isOpen,
										'text-highlight-secondary transition-colors duration-150 group-hover:text-primary':
											!isActive(item.slug)
									})}
								>
									{item.name}
								</span>
							</div>
						</a>
					</li>
				{/each}
			</ul>
		</div>
		<div class="px-4 pt-4">
			<hr class="border-highlight-primary" />
		</div>
		<div class="px-4 pt-4">
			<ul class="flex flex-col gap-4">
				<li>
					<span
						class="group pointer-events-none flex justify-center rounded-md px-3 py-3 text-sm opacity-50 transition-colors duration-150 lg:justify-start"
					>
						<div class="flex items-center gap-2">
							<Help class="stroke-highlight-secondary transition-colors duration-150" />
							<span
								class={cn(
									'hidden text-highlight-secondary transition-colors duration-150 lg:block',
									{
										'block sm:hidden': isOpen,
										hidden: !isOpen
									}
								)}
							>
								Aide
							</span>
						</div>
					</span>
				</li>
				<li>
					<a
						on:click={() => {
							isOpen = false;
						}}
						href="mailto:cyberbottle@peerat.dev"
						class="group flex justify-center rounded-md px-3 py-3 text-sm transition-colors duration-150 hover:bg-primary-700 lg:justify-start"
					>
						<div class="flex items-center gap-2">
							<Mail
								class="stroke-highlight-secondary transition-colors duration-150 group-hover:stroke-primary-0"
							/>
							<span
								class={cn(
									'hidden text-highlight-secondary transition-colors duration-150 group-hover:text-primary lg:block',
									{
										'block sm:hidden': isOpen,
										hidden: !isOpen
									}
								)}
							>
								Mail
							</span>
						</div>
					</a>
				</li>
				<li>
					<a
						on:click={() => {
							isOpen = false;
						}}
						href="//discord.gg/72vuHcwUkE"
						class="group flex justify-center rounded-md px-3 py-3 text-sm transition-colors duration-150 hover:bg-primary-700 lg:justify-start"
					>
						<div class="flex items-center gap-2">
							<Discord
								class="fill-highlight-secondary transition-colors duration-150 group-hover:fill-primary-0"
							/>
							<span
								class={cn(
									'hidden text-highlight-secondary transition-colors duration-150 group-hover:text-primary lg:block',
									{
										'block sm:hidden': isOpen,
										hidden: !isOpen
									}
								)}
							>
								Discord
							</span>
						</div>
					</a>
				</li>
				<li>
					<a
						on:click={() => {
							isOpen = false;
						}}
						href="//git.peerat.dev"
						class="group flex justify-center rounded-md px-3 py-3 text-sm transition-colors duration-150 hover:bg-primary-700 lg:justify-start"
					>
						<div class="flex items-center gap-2">
							<Git
								class="stroke-highlight-secondary transition-colors duration-150 group-hover:stroke-primary-0"
							/>
							<span
								class={cn(
									'hidden text-highlight-secondary transition-colors duration-150 group-hover:text-primary lg:block',
									{
										'block sm:hidden': isOpen,
										hidden: !isOpen
									}
								)}
							>
								Git
							</span>
						</div>
					</a>
				</li>
			</ul>
		</div>
	</div>
</aside>