ervin/nuxt-start
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

menu

Browse Source
This commit is contained in:
Juhász Ervin 2026-01-02 20:04:02 +01:00
parent 864e40e25d
commit ee2a8f1bf8
2 changed files with 8 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.ottotime
View File

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

9
components/AppMenu.vue
View File

@ -23,7 +23,7 @@
ref="drawerRef" 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="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" :class="drawerClass"
:style="{ transform: `translateX(${translateX}px)` }" :style="drawerStyle"
> >
<div class="p-4"> <div class="p-4">
<div class="flex flex-col mb-4"> <div class="flex flex-col mb-4">
@ -115,12 +115,17 @@ const backdropOpacity = computed(() => {
return openness * 0.5 return openness * 0.5
}) })
// Dynamic classes // Dynamic classes and styles
const drawerClass = computed(() => ({ const drawerClass = computed(() => ({
'transition-transform duration-300 ease-out': !isDragging.value, 'transition-transform duration-300 ease-out': !isDragging.value,
'pointer-events-none': !isOpen.value && !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(() => ({ const backdropClass = computed(() => ({
'transition-opacity duration-300': !isDragging.value, 'transition-opacity duration-300': !isDragging.value,
'pointer-events-none': backdropOpacity.value <= 0 'pointer-events-none': backdropOpacity.value <= 0