From b126a79b03557cec5f2afb5d4b251d44c0b082b3 Mon Sep 17 00:00:00 2001
From: TZGyn <ca538901d@mozmail.com>
Date: Mon, 20 Nov 2023 06:02:26 +0800
Subject: [PATCH] update sidebar sheet to close on action

---
 src/lib/components/UserIcon.svelte | 7 ++++++-
 src/routes/(app)/+layout.svelte    | 7 +++++--
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/lib/components/UserIcon.svelte b/src/lib/components/UserIcon.svelte
index af1e72e..0446c67 100644
--- a/src/lib/components/UserIcon.svelte
+++ b/src/lib/components/UserIcon.svelte
@@ -8,6 +8,7 @@
 	import { goto } from '$app/navigation'
 
 	export let email: string = ''
+	export let onClick: () => void = () => {}
 
 	let dialogOpen = false
 	let isLoading = false
@@ -33,7 +34,11 @@
 		<DropdownMenu.Group>
 			<DropdownMenu.Label>{email}</DropdownMenu.Label>
 			<DropdownMenu.Separator />
-			<DropdownMenu.Item on:click={() => goto('/profile')}>
+			<DropdownMenu.Item
+				on:click={() => {
+					goto('/profile')
+					onClick()
+				}}>
 				Profile
 			</DropdownMenu.Item>
 			<DropdownMenu.Separator />
diff --git a/src/routes/(app)/+layout.svelte b/src/routes/(app)/+layout.svelte
index 534e04b..d42c6bc 100644
--- a/src/routes/(app)/+layout.svelte
+++ b/src/routes/(app)/+layout.svelte
@@ -19,7 +19,8 @@
 <div class="flex h-screen w-full">
 	<Sidebar email={data.user.email} class="hidden lg:flex" />
 	<div class="h-full max-h-screen w-full overflow-scroll">
-		<div class="block w-full border-b px-4 py-2 lg:hidden">
+		<div
+			class="sticky top-0 block w-full border-b bg-background px-4 py-2 lg:hidden">
 			<Sheet.Root bind:open={sheetOpen}>
 				<Sheet.Trigger asChild let:builder>
 					<Button builders={[builder]} variant="ghost" class="p-2">
@@ -47,7 +48,9 @@
 						<div class="flex flex-col gap-4">
 							<Separator />
 							<div class="flex items-center justify-between">
-								<UserIcon email={data.user.email} />
+								<UserIcon
+									email={data.user.email}
+									onClick={closeSheet} />
 							</div>
 						</div>
 					</div>