refac

src/lib/components/layout/Sidebar/UserMenu.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { DropdownMenu } from 'bits-ui';
-	import { createEventDispatcher, getContext, onMount } from 'svelte';
+	import { createEventDispatcher, getContext, onMount, tick } from 'svelte';
 
 	import { flyAndScale } from '$lib/utils/transitions';
 	import { goto } from '$app/navigation';
@@ -73,10 +73,12 @@
 			<DropdownMenu.Item
 				class="flex rounded-md py-1.5 px-3 w-full hover:bg-gray-50 dark:hover:bg-gray-800 transition cursor-pointer"
 				on:click={async () => {
-					await showSettings.set(true);
 					show = false;
 
+					await showSettings.set(true);
+
 					if ($mobile) {
+						await tick();
 						showSidebar.set(false);
 					}
 				}}
@@ -89,11 +91,14 @@
 
 			<DropdownMenu.Item
 				class="flex rounded-md py-1.5 px-3 w-full hover:bg-gray-50 dark:hover:bg-gray-800 transition cursor-pointer"
-				on:click={() => {
-					dispatch('show', 'archived-chat');
+				on:click={async () => {
 					show = false;
 
+					dispatch('show', 'archived-chat');
+
 					if ($mobile) {
+						await tick();
+
 						showSidebar.set(false);
 					}
 				}}
@@ -109,9 +114,10 @@
 					as="a"
 					href="/playground"
 					class="flex rounded-md py-1.5 px-3 w-full hover:bg-gray-50 dark:hover:bg-gray-800 transition select-none"
-					on:click={() => {
+					on:click={async () => {
 						show = false;
 						if ($mobile) {
+							await tick();
 							showSidebar.set(false);
 						}
 					}}
@@ -125,9 +131,10 @@
 					as="a"
 					href="/admin"
 					class="flex rounded-md py-1.5 px-3 w-full hover:bg-gray-50 dark:hover:bg-gray-800 transition select-none"
-					on:click={() => {
+					on:click={async () => {
 						show = false;
 						if ($mobile) {
+							await tick();
 							showSidebar.set(false);
 						}
 					}}
@@ -176,9 +183,14 @@
 				<DropdownMenu.Item
 					class="flex gap-2 items-center py-1.5 px-3 text-sm select-none w-full cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md transition cursor-pointer"
 					id="chat-share-button"
-					on:click={() => {
-						showShortcuts.set(!$showShortcuts);
+					on:click={async () => {
 						show = false;
+						showShortcuts.set(!$showShortcuts);
+
+						if ($mobile) {
+							await tick();
+							showSidebar.set(false);
+						}
 					}}
 				>
 					<Keyboard className="size-5" />