fix: minor ui changes

src/lib/components/Badge.svelte

@@ -19,5 +19,5 @@
 		width={500}
 		height={500}
 	/>
-	<span class="text-sm font-semibold">{name}</span>
+	<span class="text-sm font-semibold break-all">{name}</span>
 </div>

src/lib/components/Navbar.svelte

@@ -18,7 +18,7 @@
 </script>
 
 <div
-	class="z-50 flex w-full flex-row items-center justify-between border-b border-solid border-highlight-primary px-4 sm:px-8 py-4"
+	class="z-50 flex w-full flex-row items-center justify-between border-b border-solid border-highlight-primary px-4 py-4 sm:px-8"
 >
 	<div class="flex flex-row items-center space-x-2 sm:space-x-0">
 		<div class="flex items-center">
@@ -49,9 +49,20 @@
 			</div>
 		{/if} -->
 	</div>
+	<div class="flex flex-row items-center gap-2">
+		{#if !isOpen}
+			<a href="/logout">
+				<button
+					class="flex items-center gap-1 rounded-md p-2 text-destructive hover:bg-destructive/10"
+				>
+					Se déconnecter
+				</button>
+			</a>
+		{/if}
 		<div class="flex flex-row items-center gap-2">
 			<Avatar />
 			{user?.pseudo}
+		</div>
 		<!-- {!isLoading && me ? (
         <Popover
           open={isMenuOpen}

src/lib/components/Sidenav.svelte

@@ -117,20 +117,14 @@
 		<div class="px-4 pt-4">
 			<ul class="flex flex-col gap-4">
 				<li>
-					<a
+					<span
-						on:click={() => {
+						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"
-							isOpen = false;
-						}}
-						href="/dashboard/help"
-						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">
-							<Help
+							<Help class="stroke-highlight-secondary transition-colors duration-150" />
-								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',
+									'hidden text-highlight-secondary transition-colors duration-150 lg:block',
 									{
 										'block sm:hidden': isOpen,
 										hidden: !isOpen
@@ -140,7 +134,7 @@
 								Aide
 							</span>
 						</div>
-					</a>
+					</span>
 				</li>
 				<li>
 					<a

src/routes/dashboard/+layout.svelte

@@ -1,6 +1,7 @@
 <script class="ts">
 	import Navbar from '$lib/components/Navbar.svelte';
 	import Sidenav from '$lib/components/Sidenav.svelte';
+	import Toaster from '$lib/components/Toaster.svelte';
 
 	let isOpen = false;
 </script>
@@ -10,8 +11,9 @@
 		<Sidenav bind:isOpen />
 		<div class="flex flex-1 flex-col">
 			<Navbar bind:isOpen />
+			<Toaster />
 			<div
-				class="flex w-full flex-1 transform flex-col overflow-y-scroll p-4 sm:p-8 duration-300 ease-in-out"
+				class="flex w-full flex-1 transform flex-col overflow-y-scroll p-4 duration-300 ease-in-out sm:p-8"
 			>
 				<slot />
 			</div>

src/routes/dashboard/badges/+page.svelte

@@ -3,18 +3,18 @@
 	import Badge from '$lib/components/Badge.svelte';
 
 	$: user = $page.data.user;
+	$: badges = user?.badges?.sort((a, b) => a.level - b.level);
 </script>
 
-<section class="flex h-full w-full flex-col space-y-4">
+<section class="flex h-full w-full flex-col gap-4">
 	<header class="flex flex-col">
 		<h1 class="text-xl font-semibold">Mes badges</h1>
 		<p class="text-muted">Vos badges sont affichés ici, vous pouvez les partager avec vos amis</p>
 	</header>
-	<!-- <Separator /> -->
+	<main class="flex flex-col justify-between gap-4">
-	<main class="flex flex-col justify-between space-x-0 space-y-4">
+		<div class="flex flex-wrap gap-4">
-		<div class="flex space-x-2">
+			{#if badges && badges.length}
-			{#if user?.badges}
+				{#each badges as badge}
-				{#each user.badges as badge}
 					<Badge name={badge.name} src={badge.logo} alt={badge.name} level={badge.level} />
 				{/each}
 			{:else}

src/routes/dashboard/chapters/+page.svelte

@@ -9,7 +9,7 @@
 <section class="flex w-full flex-col space-y-6">
 	<header class="sticky flex items-center justify-between">
 		<div class="flex flex-col">
-			<h1 class="text-xl font-semibold">Chaptires</h1>
+			<h1 class="text-xl font-semibold">Chapitres</h1>
 			<p class="text-muted">
 				Les chapitres sont les différentes parties du jeu. Chaque chapitre est composé de plusieurs
 				puzzles.