diff --git a/packages/vuetify/src/components/VNavigationDrawer/VNavigationDrawer.tsx b/packages/vuetify/src/components/VNavigationDrawer/VNavigationDrawer.tsx index 346e7a4668c..99eda661bc9 100644 --- a/packages/vuetify/src/components/VNavigationDrawer/VNavigationDrawer.tsx +++ b/packages/vuetify/src/components/VNavigationDrawer/VNavigationDrawer.tsx @@ -155,7 +155,8 @@ export const VNavigationDrawer = genericComponent()({ isActive.value = props.permanent || !mobile.value }) - const { isDragging, dragProgress, dragStyles } = useTouch({ + const { isDragging, dragProgress } = useTouch({ + el: rootEl, isActive, isTemporary, width, @@ -243,7 +244,6 @@ export const VNavigationDrawer = genericComponent()({ style={[ backgroundColorStyles.value, layoutItemStyles.value, - dragStyles.value, ssrBootStyles.value, stickyStyles.value, props.style, diff --git a/packages/vuetify/src/components/VNavigationDrawer/touch.ts b/packages/vuetify/src/components/VNavigationDrawer/touch.ts index 36e5f57af5c..1f21ecfed84 100644 --- a/packages/vuetify/src/components/VNavigationDrawer/touch.ts +++ b/packages/vuetify/src/components/VNavigationDrawer/touch.ts @@ -1,13 +1,22 @@ // Composables +import { useToggleScope } from '@/composables/toggleScope' import { useVelocity } from '@/composables/touch' // Utilities -import { computed, onBeforeUnmount, onMounted, shallowRef } from 'vue' +import { computed, onBeforeUnmount, onMounted, onScopeDispose, shallowRef, watchEffect } from 'vue' // Types import type { Ref } from 'vue' -export function useTouch ({ isActive, isTemporary, width, touchless, position }: { +export function useTouch ({ + el, + isActive, + isTemporary, + width, + touchless, + position, +}: { + el: Ref isActive: Ref isTemporary: Ref width: Ref @@ -174,6 +183,21 @@ export function useTouch ({ isActive, isTemporary, width, touchless, position }: } : undefined }) + useToggleScope(isDragging, () => { + const transform = el.value?.style.transform ?? null + const transition = el.value?.style.transition ?? null + + watchEffect(() => { + el.value?.style.setProperty('transform', dragStyles.value?.transform || 'none') + el.value?.style.setProperty('transition', dragStyles.value?.transition || null) + }) + + onScopeDispose(() => { + el.value?.style.setProperty('transform', transform) + el.value?.style.setProperty('transition', transition) + }) + }) + return { isDragging, dragProgress,