From 24a626bbeb2cb7823d997338c508739229198e66 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Th=C3=A9o?= <43091603+glazk0@users.noreply.github.com>
Date: Sun, 24 Sep 2023 21:57:30 +0200
Subject: [PATCH] fix: semantic & target blank

---
 src/lib/components/Sidenav.svelte | 163 ++++++++++++++----------------
 1 file changed, 77 insertions(+), 86 deletions(-)

diff --git a/src/lib/components/Sidenav.svelte b/src/lib/components/Sidenav.svelte
index 81c4621..ec07dd7 100644
--- a/src/lib/components/Sidenav.svelte
+++ b/src/lib/components/Sidenav.svelte
@@ -80,32 +80,30 @@
 							}}
 							href={item.slug}
 							class={cn(
-								'flex justify-center rounded-md px-3 py-3 text-sm transition-colors duration-150 lg:justify-start',
+								'flex items-center justify-center gap-2 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>
+							<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>
 						</a>
 					</li>
 				{/each}
@@ -118,22 +116,17 @@
 			<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"
+						class="group pointer-events-none flex items-center justify-center gap-2 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>
+						<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>
 					</span>
 				</li>
 				<li>
@@ -142,24 +135,22 @@
 							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"
+						class="group flex items-center justify-center gap-2 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>
+						<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>
 					</a>
 				</li>
 				<li>
@@ -168,24 +159,24 @@
 							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"
+						target="_blank"
+						rel="noopener"
+						class="group flex items-center justify-center gap-2 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>
+						<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>
 					</a>
 				</li>
 				<li>
@@ -194,24 +185,24 @@
 							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"
+						target="_blank"
+						rel="noopener"
+						class="group flex items-center justify-center gap-2 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>
+						<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>
 					</a>
 				</li>
 			</ul>