From 925dc0dcb81ab8307e2a4dd6df3dd0a6fd6aba0e Mon Sep 17 00:00:00 2001
From: Youwen Wu <youwenw@gmail.com>
Date: Thu, 4 Apr 2024 16:16:21 -0700
Subject: [PATCH] feat: make theme picker dropdown wide on mobile

---
 src/lib/components/Navbar/Drawer.svelte |  2 +-
 src/lib/components/ThemePicker.svelte   | 14 ++++++++++++--
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/lib/components/Navbar/Drawer.svelte b/src/lib/components/Navbar/Drawer.svelte
index 2863d33..84c5a44 100644
--- a/src/lib/components/Navbar/Drawer.svelte
+++ b/src/lib/components/Navbar/Drawer.svelte
@@ -74,7 +74,7 @@
 							>
 						</Drawer.Close>
 						<Separator class="h-1 rounded-3xl mt-1 dark:bg-zinc-500 my-2" />
-						<ThemePicker let:builder>
+						<ThemePicker let:builder hideLabel wide>
 							<Button variant="outline" size="lg" builders={[builder]}>
 								<Sun class="mr-4 dark:hidden" />
 								<Moon class="mr-4 hidden dark:block" />
diff --git a/src/lib/components/ThemePicker.svelte b/src/lib/components/ThemePicker.svelte
index 88297db..110e3dd 100644
--- a/src/lib/components/ThemePicker.svelte
+++ b/src/lib/components/ThemePicker.svelte
@@ -5,12 +5,17 @@
   change the color theme of the website.
 
   @slot builder - A slot for the button that triggers the dropdown menu.
+
+  @prop hideLabel - A boolean that determines whether to show the label
  -->
 
 <script lang="ts">
 	import * as DropdownMenu from '$lib/components/ui/dropdown-menu/index.js';
 	import { setMode } from 'mode-watcher';
 
+	export let hideLabel: boolean = true;
+	export let wide: boolean = false;
+
 	let modes = [
 		{ value: 'light', label: 'Light' },
 		{ value: 'dark', label: 'Dark' },
@@ -26,10 +31,15 @@
 	<DropdownMenu.Trigger asChild let:builder>
 		<slot {builder} />
 	</DropdownMenu.Trigger>
-	<DropdownMenu.Content>
+	<DropdownMenu.Content class={wide ? 'w-[80%]' : ''}>
+		{#if hideLabel}
+			<DropdownMenu.Label>Color Theme</DropdownMenu.Label>
+		{/if}
 		<DropdownMenu.Group>
 			{#each modes as { value, label } (value)}
-				<DropdownMenu.Item on:click={() => changeMode(value)}>{label}</DropdownMenu.Item>
+				<DropdownMenu.Item on:click={() => changeMode(value)} class={wide ? 'text-md' : ''}>
+					{label}</DropdownMenu.Item
+				>
 			{/each}
 		</DropdownMenu.Group>
 	</DropdownMenu.Content>