feat(VNavigationDrawer): add new persistent prop (#19552)

vuetifyjs · Apr 22, 2024 · 74cc2bf · 74cc2bf
1 parent 383bbdc
commit 74cc2bf
Showing 1 changed file with 7 additions and 1 deletion.
diff --git a/packages/vuetify/src/components/VNavigationDrawer/VNavigationDrawer.tsx b/packages/vuetify/src/components/VNavigationDrawer/VNavigationDrawer.tsx
@@ -71,6 +71,7 @@ export const makeVNavigationDrawerProps = propsFactory({
   },
   image: String,
   temporary: Boolean,
+  persistent: Boolean,
   touchless: Boolean,
   width: {
     type: [Number, String],
@@ -132,6 +133,7 @@ export const VNavigationDrawer = genericComponent<VNavigationDrawerSlots>()({
     const location = computed(() => {
       return toPhysical(props.location, isRtl.value) as 'left' | 'right' | 'bottom'
     })
+    const isPersistent = computed(() => props.persistent)
     const isTemporary = computed(() => !props.permanent && (mobile.value || props.temporary))
     const isSticky = computed(() =>
       props.sticky &&
@@ -225,6 +227,7 @@ export const VNavigationDrawer = genericComponent<VNavigationDrawerSlots>()({
                 'v-navigation-drawer--is-hovering': isHovering.value,
                 'v-navigation-drawer--rail': props.rail,
                 'v-navigation-drawer--temporary': isTemporary.value,
+                'v-navigation-drawer--persistent': isPersistent.value,
                 'v-navigation-drawer--active': isActive.value,
                 'v-navigation-drawer--sticky': isSticky.value,
               },
@@ -297,7 +300,10 @@ export const VNavigationDrawer = genericComponent<VNavigationDrawerSlots>()({
               <div
                 class={['v-navigation-drawer__scrim', scrimColor.backgroundColorClasses.value]}
                 style={[scrimStyles.value, scrimColor.backgroundColorStyles.value]}
-                onClick={ () => isActive.value = false }
+                onClick={ () => {
+                  if (isPersistent.value) return
+                  isActive.value = false
+                }}
                 { ...scopeId }
               />
             )}