feat(frontend): wip operator menu

frontend/src/routes/(root)/(logged)/+layout.svelte

@@ -11,7 +11,7 @@
 		WorkspaceService
 	} from '$lib/gen'
 	import { classNames } from '$lib/utils'
-
+	import { slide } from 'svelte/transition'
 	import WorkspaceMenu from '$lib/components/sidebar/WorkspaceMenu.svelte'
 	import SidebarContent from '$lib/components/sidebar/SidebarContent.svelte'
 	import {
@@ -37,7 +37,6 @@
 	import { ArrowLeft, Menu as MenuIcon } from 'lucide-svelte'
 	import { getUserExt } from '$lib/user'
 	import { workspacedOpenai } from '$lib/components/copilot/lib'
-	import Menu from '$lib/components/common/menu/MenuV2.svelte'
 	import Button from '$lib/components/common/button/Button.svelte'
 
 	OpenAPI.WITH_CREDENTIALS = true
@@ -203,6 +202,8 @@
 			}, 5000)
 		}
 	}
+
+	let menuSlide: boolean = false
 </script>
 
 <svelte:window bind:innerWidth />
@@ -346,22 +347,117 @@
 			</div>
 		{:else}
 			<div class="relative">
-				<div class="absolute top-1 left-1 z5000">
-					<Menu lightMode>
-						<div slot="trigger">
-							<Button
-								nonCaptureEvent
-								size="xs"
-								color="dark"
-								iconOnly
-								startIcon={{ icon: MenuIcon }}
-							/>
-						</div>
-						<SidebarContent {isCollapsed} noGap />
-					</Menu>
+				<div class="absolute top-2 left-2 z-50">
+					<Button
+						color="dark"
+						on:click={() => {
+							menuSlide = true
+						}}
+						startIcon={{ icon: MenuIcon }}
+						iconOnly
+					/>
 				</div>
 			</div>
+			{#if menuSlide}
+				<div
+					id="sidebar"
+					class={classNames(
+						'hidden md:flex md:flex-col md:fixed md:inset-y-0 transition-all ease-in-out duration-200 shadow-md z-40 ',
+						isCollapsed ? 'md:w-12' : 'md:w-40',
+						devOnly ? '!hidden' : '',
+						'z5000'
+					)}
+					transition:slide={{ axis: 'x', duration: 100 }}
+				>
+					<div
+						class="flex-1 flex flex-col min-h-0 h-screen shadow-lg dark:bg-[#1e232e] bg-[#202125] !dark"
+					>
+						<button
+							on:click={() => {
+								goto('/')
+							}}
+						>
+							<div
+								class="flex-row flex-shrink-0 px-3.5 py-3.5 text-opacity-70 h-12 flex items-center gap-1.5"
+								class:w-40={!isCollapsed}
+							>
+								<div class:mr-1={!isCollapsed}>
+									<WindmillIcon white={true} height="20px" width="20px" />
+								</div>
+								{#if !isCollapsed}
+									<div class="text-sm mt-0.5 text-white"> Windmill </div>
+								{/if}
+							</div>
+						</button>
+						<div class="px-2 py-4 space-y-2 border-y border-gray-700">
+							<WorkspaceMenu {isCollapsed} />
+							<FavoriteMenu {favoriteLinks} {isCollapsed} />
+						</div>
+
+						<SidebarContent {isCollapsed} />
+					</div>
+				</div>
+			{/if}
 		{/if}
+		<div
+			class={classNames(
+				'fixed inset-0 dark:bg-[#1e232e] bg-[#202125] dark:bg-opacity-75 bg-opacity-75 transition-opacity ease-linear duration-300 z-40 !dark',
+
+				menuSlide ? 'opacity-100' : 'opacity-0'
+			)}
+		>
+			<div class="fixed inset-0 flex z-40">
+				<div
+					class={classNames(
+						'relative flex-1 flex flex-col max-w-min w-full bg-surface transition ease-in-out duration-100 transform',
+						menuSlide ? 'translate-x-0' : '-translate-x-full'
+					)}
+				>
+					<div
+						class={classNames(
+							'absolute top-0 right-0 -mr-12 pt-2 ease-in-out duration-100',
+							menuSlide ? 'opacity-100' : 'opacity-0'
+						)}
+					>
+						<button
+							type="button"
+							on:click={() => {
+								menuSlide = !menuSlide
+							}}
+							class="ml-1 flex items-center justify-center h-8 w-8 rounded-full focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white border border-white"
+						>
+							<svg
+								class="h-6 w-6 text-white"
+								xmlns="http://www.w3.org/2000/svg"
+								fill="none"
+								viewBox="0 0 24 24"
+								stroke-width="2"
+								stroke="currentColor"
+								aria-hidden="true"
+							>
+								<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+							</svg>
+						</button>
+					</div>
+					<div class="dark:bg-[#1e232e] bg-[#202125] h-full !dark">
+						<div
+							class="flex gap-x-2 flex-shrink-0 p-4 font-semibold text-gray-200 w-10"
+							class:w-40={!isCollapsed}
+						>
+							<WindmillIcon white={true} height="20px" width="20px" />
+							{#if !isCollapsed}Windmill{/if}
+						</div>
+
+						<div class="px-2 py-4 space-y-2 border-y border-gray-500">
+							<WorkspaceMenu />
+							<FavoriteMenu {favoriteLinks} />
+						</div>
+
+						<SidebarContent {isCollapsed} />
+					</div>
+				</div>
+			</div>
+		</div>
 		<div
 			id="content"
 			class={classNames(