From a209ab3b638deed51f6d18a6e13cfe89e07cb219 Mon Sep 17 00:00:00 2001
From: Josh Creek <8179928+jcreek@users.noreply.github.com>
Date: Wed, 17 Jul 2024 22:15:43 +0100
Subject: [PATCH] feat(#46): Move change view button to sidebar

---
 src/lib/components/pokedex/PokedexSidebar.svelte | 9 +++++++++
 src/routes/mydex/+page.svelte                    | 5 ++---
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/lib/components/pokedex/PokedexSidebar.svelte b/src/lib/components/pokedex/PokedexSidebar.svelte
index 48534ae..fb25d38 100644
--- a/src/lib/components/pokedex/PokedexSidebar.svelte
+++ b/src/lib/components/pokedex/PokedexSidebar.svelte
@@ -14,11 +14,20 @@
 	export let toggleOrigins = () => {};
 	export let toggleShiny = () => {};
 	export let getData = () => {};
+	export let toggleViewAsBoxes = () => {};
 </script>
 
 <aside
 	class="menu bg-gray-800 text-white min-h-full w-64 p-4 lg:fixed xs:top-0 lg:left-0 h-full lg:h-5/6"
 >
+	<h2 class="text-2xl font-semibold mb-4">Views</h2>
+	<ul>
+		<li class="mb-2">
+			<button class="block p-2 hover:bg-gray-700 rounded" on:click={toggleViewAsBoxes}>
+				{viewAsBoxes ? 'Switch to List View' : 'Switch to Box View'}
+			</button>
+		</li>
+	</ul>
 	<h2 class="text-2xl font-semibold mb-4">Filters</h2>
 	<ul>
 		<li class="mb-2">
diff --git a/src/routes/mydex/+page.svelte b/src/routes/mydex/+page.svelte
index 8c045b8..0691926 100644
--- a/src/routes/mydex/+page.svelte
+++ b/src/routes/mydex/+page.svelte
@@ -245,9 +245,7 @@
 			>
 				{drawerOpen ? 'Close Filters' : 'Open Filters'}
 			</label>
-			<button class="btn btn-primary" on:click={toggleViewAsBoxes}>
-				{viewAsBoxes ? 'Switch to List View' : 'Switch to Box View'}
-			</button>
+
 			{#if viewAsBoxes}
 				<PokedexViewBoxes
 					bind:showShiny
@@ -292,6 +290,7 @@
 				{toggleForms}
 				{toggleOrigins}
 				{toggleShiny}
+				{toggleViewAsBoxes}
 			/>
 		</div>
 	</div>