menu

.ottotime

@@ -77,4 +77,4 @@
 1767373107-  6:35
 1767376587- 12:56
 1767377746- 15:56
-1767379098- 24:00
+1767379098- 25:30

components/AppMenu.vue

@@ -23,7 +23,7 @@
         ref="drawerRef"
         class="fixed top-0 right-0 h-full w-72 bg-surface-0 dark:bg-surface-900 z-50 shadow-xl will-change-transform"
         :class="drawerClass"
-        :style="{ transform: `translateX(${translateX}px)` }"
+        :style="drawerStyle"
       >
         <div class="p-4">
           <div class="flex flex-col mb-4">
@@ -115,12 +115,17 @@ const backdropOpacity = computed(() => {
   return openness * 0.5
 })
 
-// Dynamic classes
+// Dynamic classes and styles
 const drawerClass = computed(() => ({
   'transition-transform duration-300 ease-out': !isDragging.value,
   'pointer-events-none': !isOpen.value && !isDragging.value
 }))
 
+const drawerStyle = computed(() => ({
+  transform: `translateX(${translateX.value}px)`,
+  visibility: (!isOpen.value && !isDragging.value) ? 'hidden' as const : 'visible' as const
+}))
+
 const backdropClass = computed(() => ({
   'transition-opacity duration-300': !isDragging.value,
   'pointer-events-none': backdropOpacity.value <= 0