diff --git a/.ottotime b/.ottotime
index 5f6de5d..9ccf93a 100644
--- a/.ottotime
+++ b/.ottotime
@@ -77,4 +77,4 @@
1767373107- 6:35
1767376587- 12:56
1767377746- 15:56
-1767379098- 24:00
+1767379098- 25:30
diff --git a/components/AppMenu.vue b/components/AppMenu.vue
index a75f988..a27f43c 100644
--- a/components/AppMenu.vue
+++ b/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"
>
@@ -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