From 0201c019398c3a9ae1ecb4dbede775df875c8c70 Mon Sep 17 00:00:00 2001
From: John Leider <john@vuetifyjs.com>
Date: Sat, 6 Apr 2024 16:47:55 -0500
Subject: [PATCH] feat(VNavigationDrawer): add delay functionality for rail

resolves #18413
---
 .../VNavigationDrawer/VNavigationDrawer.tsx     | 17 ++++++++---------
 1 file changed, 8 insertions(+), 9 deletions(-)

diff --git a/packages/vuetify/src/components/VNavigationDrawer/VNavigationDrawer.tsx b/packages/vuetify/src/components/VNavigationDrawer/VNavigationDrawer.tsx
index 57b37d248fb..da15eeb5104 100644
--- a/packages/vuetify/src/components/VNavigationDrawer/VNavigationDrawer.tsx
+++ b/packages/vuetify/src/components/VNavigationDrawer/VNavigationDrawer.tsx
@@ -13,6 +13,7 @@ import { makeBorderProps, useBorder } from '@/composables/border'
 import { useBackgroundColor } from '@/composables/color'
 import { makeComponentProps } from '@/composables/component'
 import { provideDefaults } from '@/composables/defaults'
+import { makeDelayProps, useDelay } from '@/composables/delay'
 import { makeDisplayProps, useDisplay } from '@/composables/display'
 import { makeElevationProps, useElevation } from '@/composables/elevation'
 import { makeLayoutItemProps, useLayoutItem } from '@/composables/layout'
@@ -84,6 +85,7 @@ export const makeVNavigationDrawerProps = propsFactory({
 
   ...makeBorderProps(),
   ...makeComponentProps(),
+  ...makeDelayProps(),
   ...makeDisplayProps(),
   ...makeElevationProps(),
   ...makeLayoutItemProps(),
@@ -118,6 +120,10 @@ export const VNavigationDrawer = genericComponent<VNavigationDrawerSlots>()({
     const rootEl = ref<HTMLElement>()
     const isHovering = shallowRef(false)
 
+    const { runOpenDelay, runCloseDelay } = useDelay(props, value => {
+      isHovering.value = value
+    })
+
     const width = computed(() => {
       return (props.rail && props.expandOnHover && isHovering.value)
         ? Number(props.width)
@@ -201,13 +207,6 @@ export const VNavigationDrawer = genericComponent<VNavigationDrawerSlots>()({
       },
     })
 
-    function onMouseenter () {
-      isHovering.value = true
-    }
-    function onMouseleave () {
-      isHovering.value = false
-    }
-
     useRender(() => {
       const hasImage = (slots.image || props.image)
 
@@ -215,8 +214,8 @@ export const VNavigationDrawer = genericComponent<VNavigationDrawerSlots>()({
         <>
           <props.tag
             ref={ rootEl }
-            onMouseenter={ onMouseenter }
-            onMouseleave={ onMouseleave }
+            onMouseenter={ runOpenDelay }
+            onMouseleave={ runCloseDelay }
             class={[
               'v-navigation-drawer',
               `v-navigation-drawer--${location.value}`,