docs: design fixes (#280)

* Desktop navigation design fixes

* sidebar nav

* format code

src/components/light-switch.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Sun, MoonStars } from "phosphor-svelte";
+	import { Sun, Moon } from "phosphor-svelte";
 	import { Button } from "$lib";
 	import { toggleMode, mode } from "mode-watcher";
 	import { scale } from "svelte/transition";
@@ -24,7 +24,7 @@
 				easing: cubicOut
 			}}
 		>
-			<MoonStars class="sq-6" aria-label="Moon" />
+			<Moon class="sq-6" aria-label="Moon" />
 		</div>
 	{:else}
 		<div

src/components/navigation/sidebar-nav-items.svelte

@@ -7,7 +7,7 @@
 </script>
 
 {#if items.length}
-	<div class="grid grid-flow-row auto-rows-max gap-1 pl-4 text-sm">
+	<div class="grid grid-flow-row auto-rows-max gap-0.5 pl-4 text-sm">
 		{#each items as item, index (index)}
 			{#if item.href}
 				<a

src/components/navigation/sidebar-nav-main-items.svelte

@@ -1,15 +1,15 @@
 <script lang="ts">
 	import type { SidebarNavItem } from "@/config";
-	import { RocketLaunch, BookOpen, Code, Palette } from "phosphor-svelte";
+	import { Sticker, Compass, CodeBlock, Palette } from "phosphor-svelte";
 	import { page } from "$app/stores";
 	import { cn } from "@/utils";
 
 	export let items: SidebarNavItem[] = [];
 
 	const iconMap = {
-		Introduction: BookOpen,
-		"Getting Started": RocketLaunch,
-		Delegation: Code,
+		Introduction: Sticker,
+		"Getting Started": Compass,
+		Delegation: CodeBlock,
 		Styling: Palette
 	} as const;
 
@@ -36,7 +36,7 @@
 					rel={item.external ? "noreferrer" : ""}
 				>
 					{#if isIconMapKey(item.title)}
-						<svelte:component this={iconMap[item.title]} class="sq-5" />
+						<svelte:component this={iconMap[item.title]} size={22} />
 					{/if}
 					{item.title}
 					{#if item.label}

src/components/navigation/sidebar-nav.svelte

@@ -17,7 +17,7 @@
 						{:else}
 							<div class="pb-4">
 								<h4
-									class="mb-1 ml-[9px] rounded-md px-2.5 py-2 pl-4 text-xs font-normal uppercase text-muted-foreground"
+									class="mb-1 ml-[9px] rounded-md px-2.5 py-2 pl-4 text-xs font-medium uppercase text-muted-foreground"
 								>
 									{item.title}
 								</h4>

src/components/site-header.svelte

@@ -26,7 +26,7 @@
 					rel="noopener noreferrer"
 					class="inline-flex h-10 items-center
 					justify-center whitespace-nowrap rounded-[9px] bg-muted px-4
-					text-sm font-semibold text-foreground shadow-mini ring-offset-background transition-colors hover:bg-muted/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+					text-sm font-semibold text-foreground ring-offset-background transition-colors hover:bg-dark-10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background"
 				>
 					Report an issue
 				</Button.Root>