refac: playground

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

@@ -81,6 +81,32 @@
 			</button>
 
 			{#if role === 'admin'}
+				<button
+					class="flex rounded-md py-2 px-3 w-full hover:bg-gray-50 dark:hover:bg-gray-800 transition"
+					on:click={() => {
+						goto('/playground');
+						show = false;
+					}}
+				>
+					<div class=" self-center mr-3">
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke-width="1.5"
+							stroke="currentColor"
+							class="size-5"
+						>
+							<path
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								d="M14.25 9.75 16.5 12l-2.25 2.25m-4.5 0L7.5 12l2.25-2.25M6 20.25h12A2.25 2.25 0 0 0 20.25 18V6A2.25 2.25 0 0 0 18 3.75H6A2.25 2.25 0 0 0 3.75 6v12A2.25 2.25 0 0 0 6 20.25Z"
+							/>
+						</svg>
+					</div>
+					<div class=" self-center font-medium">{$i18n.t('Playground')}</div>
+				</button>
+
 				<button
 					class="flex rounded-md py-2 px-3 w-full hover:bg-gray-50 dark:hover:bg-gray-800 transition"
 					on:click={() => {

src/routes/(app)/playground/+page.svelte

+<script>
+	import { showSidebar } from '$lib/stores';
+
+	import Playground from '$lib/components/workspace/Playground.svelte';
+</script>
+
+<div
+	class=" flex flex-col w-full min-h-screen max-h-screen {$showSidebar
+		? 'md:max-w-[calc(100%-260px)]'
+		: ''}"
+>
+	<div class=" py-4 px-5 flex-1 max-h-full overflow-y-auto">
+		<Playground />
+	</div>
+</div>

src/routes/(app)/workspace/+layout.svelte

@@ -82,13 +82,6 @@
 			>
 				{$i18n.t('Functions')}
 			</a>
-
-			<a
-				class="min-w-fit rounded-lg p-1.5 px-3 {$page.url.pathname.includes('/workspace/playground')
-					? 'bg-gray-50 dark:bg-gray-850'
-					: ''} transition"
-				href="/workspace/playground">{$i18n.t('Playground')}</a
-			>
 		</div>
 	</div>
 

src/routes/(app)/workspace/playground/+page.svelte

-<script>
-	import Playground from '$lib/components/workspace/Playground.svelte';
-</script>
-
-<Playground />