feat(VNavigationDrawer): add delay functionality for rail

resolves #18413

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,22 +207,15 @@ export const VNavigationDrawer = genericComponent<VNavigationDrawerSlots>()({
       },
     })
 
-    function onMouseenter () {
-      isHovering.value = true
-    }
-    function onMouseleave () {
-      isHovering.value = false
-    }
-
     useRender(() => {
       const hasImage = (slots.image || props.image)
 
       return (
         <>
           <props.tag
             ref={ rootEl }
-            onMouseenter={ onMouseenter }
-            onMouseleave={ onMouseleave }
+            onMouseenter={ runOpenDelay }
+            onMouseleave={ runCloseDelay }
             class={[
               'v-navigation-drawer',
               `v-navigation-drawer--${location.value}`,